From 93c5780fabe2197955b0890f95224e04f969992e Mon Sep 17 00:00:00 2001 From: John Cowen Date: Mon, 21 Jun 2021 11:54:58 +0100 Subject: [PATCH] ui: Move all our icons to use CSS custom properties instead of SASS vars (#10298) * ui: Move all our icons to use CSS custom properties The good thing about SASS vars is, if you don't use them they get removed from the final build. Whereas with CSS we have no tree-shaking to get rid of unused CSS custom properties. We can mostly work around this and for some things like colors its no big deal if we have some hex-codes in the build that we don't use as hex-codes are relatively small. We've been slowly but surely moving all of our colors (and other things) to use CSS custom properties instead of SASS vars now that we have them available. This commit makes use of the 'tree-shaking' abilities of @extend to ensure that we only compile in the icons that we use. This commit is mostly churn-less as we already use @extend for the majority of our icons, so generally there is zero change here for working on the UI, but I did spot one single place where we were using SASS vars instead of @extend. This now uses the new form (second commit) Interestingly this reduces our CSS payload by ~2kb to ~53kb (around 25kb of that is these icons) --- .changelog/10298.txt | 3 + .../app/styles/base/icons/base-variables.scss | 946 ++++++-- .../styles/base/icons/icon-placeholders.scss | 1923 +++++++++-------- .../app/styles/components/progress/skin.scss | 3 +- 4 files changed, 1737 insertions(+), 1138 deletions(-) create mode 100644 .changelog/10298.txt diff --git a/.changelog/10298.txt b/.changelog/10298.txt new file mode 100644 index 000000000..1ce0e1302 --- /dev/null +++ b/.changelog/10298.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: Move all CSS icons to use standard CSS custom properties rather than SASS variables +``` diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss index 0987bfd6a..a8ef79183 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss @@ -1,187 +1,759 @@ -$alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$alert-triangle-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,'); -$arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,'); -$arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); -$arrow-right-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); -$arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,'); -$aws-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$bolt-svg: url('data:image/svg+xml;charset=UTF-8,'); -$box-check-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$box-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$bug-svg: url('data:image/svg+xml;charset=UTF-8,'); -$calendar-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$caret-down-svg: url('data:image/svg+xml;charset=UTF-8,'); -$caret-up-svg: url('data:image/svg+xml;charset=UTF-8,'); -$check-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$check-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); -$chevron-down-2-svg: url('data:image/svg+xml;charset=UTF-8,'); -$chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,'); -$chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,'); -$chevron-right-svg: url('data:image/svg+xml;charset=UTF-8,'); -$chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,'); -$chevron-svg: url('data:image/svg+xml;charset=UTF-8,'); -$clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$clock-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$cloud-cross-svg: url('data:image/svg+xml;charset=UTF-8,'); -$code-svg: url('data:image/svg+xml;charset=UTF-8,'); -$consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$copy-action-svg: url('data:image/svg+xml;charset=UTF-8,'); -$copy-success-svg: url('data:image/svg+xml;charset=UTF-8,'); -$database-svg: url('data:image/svg+xml;charset=UTF-8,'); -$delay-svg: url('data:image/svg+xml;charset=UTF-8,'); -$deny-alt-svg: url('data:image/svg+xml;charset=UTF-8,'); -$deny-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$deny-default-svg: url('data:image/svg+xml;charset=UTF-8,'); -$deny-svg: url('data:image/svg+xml;charset=UTF-8,'); -$disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); -$docs-svg: url('data:image/svg+xml;charset=UTF-8,'); -$download-svg: url('data:image/svg+xml;charset=UTF-8,'); -$edit-svg: url('data:image/svg+xml;charset=UTF-8,'); -$ember-circle-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$envelope-sealed-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$envelope-sealed-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$envelope-unsealed--outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$envelope-unsealed-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$exit-svg: url('data:image/svg+xml;charset=UTF-8,'); -$expand-less-svg: url('data:image/svg+xml;charset=UTF-8,'); -$expand-more-svg: url('data:image/svg+xml;charset=UTF-8,'); -$file-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$file-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$filter-svg: url('data:image/svg+xml;charset=UTF-8,'); -$flag-svg: url('data:image/svg+xml;charset=UTF-8,'); -$folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$folder-outline-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$gateway-svg: url('data:image/svg+xml;charset=UTF-8,'); -$gift-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$gift-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$git-branch-svg: url('data:image/svg+xml;charset=UTF-8,'); -$git-commit-svg: url('data:image/svg+xml;charset=UTF-8,'); -$git-pull-request-svg: url('data:image/svg+xml;charset=UTF-8,'); -$git-repository-svg: url('data:image/svg+xml;charset=UTF-8,'); -$glimmer-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$hashicorp-logo-svg: url('data:image/svg+xml;charset=UTF-8,'); -$health-svg: url('data:image/svg+xml;charset=UTF-8,'); -$help-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$history-svg: url('data:image/svg+xml;charset=UTF-8,'); -$info-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$jwt-logo-svg: url('data:image/svg+xml;charset=UTF-8,'); -$key-svg: url('data:image/svg+xml;charset=UTF-8,'); -$kubernetes-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$layers-svg: url('data:image/svg+xml;charset=UTF-8,'); -$learn-svg: url('data:image/svg+xml;charset=UTF-8,'); -$link-svg: url('data:image/svg+xml;charset=UTF-8,'); -$loading-svg: url('data:image/svg+xml;charset=UTF-8,'); -$lock-closed-svg: url('data:image/svg+xml;charset=UTF-8,'); -$lock-disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); -$lock-open-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-alicloud-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-alicloud-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-auth0-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-aws-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-aws-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-azure-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-azure-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-bitbucket-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-bitbucket-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-gcp-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-gcp-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-github-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-github-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-gitlab-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-gitlab-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-google-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-kubernetes-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-kubernetes-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-microsoft-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-okta-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-oracle-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-oracle-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-slack-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-slack-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-vmware-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$logo-vmware-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); -$menu-svg: url('data:image/svg+xml;charset=UTF-8,'); -$mesh-svg: url('data:image/svg+xml;charset=UTF-8,'); -$message-svg: url('data:image/svg+xml;charset=UTF-8,'); -$minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); -$minus-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$minus-svg: url('data:image/svg+xml;charset=UTF-8,'); -$module-svg: url('data:image/svg+xml;charset=UTF-8,'); -$more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); -$more-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); -$nomad-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$notification-disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); -$notification-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$notification-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$oidc-logo-svg: url('data:image/svg+xml;charset=UTF-8,'); -$outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$page-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$partner-svg: url('data:image/svg+xml;charset=UTF-8,'); -$path-svg: url('data:image/svg+xml;charset=UTF-8,'); -$plus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$plus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$plus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); -$plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$port-svg: url('data:image/svg+xml;charset=UTF-8,'); -$protocol-svg: url('data:image/svg+xml;charset=UTF-8,'); -$provider-svg: url('data:image/svg+xml;charset=UTF-8,'); -$public-default-svg: url('data:image/svg+xml;charset=UTF-8,'); -$public-locked-svg: url('data:image/svg+xml;charset=UTF-8,'); -$queue-svg: url('data:image/svg+xml;charset=UTF-8,'); -$radio-button-checked-svg: url('data:image/svg+xml;charset=UTF-8,'); -$radio-button-unchecked-svg: url('data:image/svg+xml;charset=UTF-8,'); -$random-svg: url('data:image/svg+xml;charset=UTF-8,'); -$redirect-svg: url('data:image/svg+xml;charset=UTF-8,'); -$refresh-alert-svg: url('data:image/svg+xml;charset=UTF-8,'); -$refresh-default-svg: url('data:image/svg+xml;charset=UTF-8,'); -$remix-svg: url('data:image/svg+xml;charset=UTF-8,'); -$ribbon-svg: url('data:image/svg+xml;charset=UTF-8,'); -$run-svg: url('data:image/svg+xml;charset=UTF-8,'); -$search-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$search-svg: url('data:image/svg+xml;charset=UTF-8,'); -$service-identity-svg: url('data:image/svg+xml;charset=UTF-8,'); -$settings-svg: url('data:image/svg+xml;charset=UTF-8,'); -$source-file-svg: url('data:image/svg+xml;charset=UTF-8,'); -$sort-svg: url('data:image/svg+xml;charset=UTF-8,'); -$star-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$star-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$star-svg: url('data:image/svg+xml;charset=UTF-8,'); -$sub-left-svg: url('data:image/svg+xml;charset=UTF-8,'); -$sub-right-svg: url('data:image/svg+xml;charset=UTF-8,'); -$support-svg: url('data:image/svg+xml;charset=UTF-8,'); -$swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); -$swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); -$tag-svg: url('data:image/svg+xml;charset=UTF-8,'); -$terraform-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$trash-svg: url('data:image/svg+xml;charset=UTF-8,'); -$tune-svg: url('data:image/svg+xml;charset=UTF-8,'); -$unfold-less-svg: url('data:image/svg+xml;charset=UTF-8,'); -$unfold-more-svg: url('data:image/svg+xml;charset=UTF-8,'); -$upload-svg: url('data:image/svg+xml;charset=UTF-8,'); -$user-add-svg: url('data:image/svg+xml;charset=UTF-8,'); -$user-organization-svg: url('data:image/svg+xml;charset=UTF-8,'); -$user-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); -$user-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); -$user-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); -$user-team-svg: url('data:image/svg+xml;charset=UTF-8,'); -$visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,'); -$visibility-show-svg: url('data:image/svg+xml;charset=UTF-8,'); -$webhook-svg: url('data:image/svg+xml;charset=UTF-8,'); +%alert-circle-fill-svg-prop { + --alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alert-circle-outline-svg-prop { + --alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alert-triangle-color-svg-prop { + --alert-triangle-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%alert-triangle-svg-prop { + --alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-down-svg-prop { + --arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-left-svg-prop { + --arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-right-color-svg-prop { + --arrow-right-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-right-svg-prop { + --arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%arrow-up-svg-prop { + --arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%aws-logo-color-svg-prop { + --aws-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bolt-svg-prop { + --bolt-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%box-check-fill-svg-prop { + --box-check-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%box-outline-svg-prop { + --box-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%bug-svg-prop { + --bug-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%calendar-svg-prop { + --calendar-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cancel-circle-fill-svg-prop { + --cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cancel-circle-outline-svg-prop { + --cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cancel-plain-svg-prop { + --cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cancel-square-fill-color-svg-prop { + --cancel-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cancel-square-fill-svg-prop { + --cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cancel-square-outline-svg-prop { + --cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%caret-down-svg-prop { + --caret-down-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%caret-up-svg-prop { + --caret-up-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-circle-fill-color-svg-prop { + --check-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-circle-fill-svg-prop { + --check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-circle-outline-svg-prop { + --check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%check-plain-svg-prop { + --check-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevron-down-2-svg-prop { + --chevron-down-2-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevron-down-svg-prop { + --chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevron-left-svg-prop { + --chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevron-right-svg-prop { + --chevron-right-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevron-up-svg-prop { + --chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%chevron-svg-prop { + --chevron-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%clock-fill-svg-prop { + --clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%clock-outline-svg-prop { + --clock-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%cloud-cross-svg-prop { + --cloud-cross-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%code-svg-prop { + --code-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%consul-logo-color-svg-prop { + --consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%copy-action-svg-prop { + --copy-action-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%copy-success-svg-prop { + --copy-success-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%database-svg-prop { + --database-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%delay-svg-prop { + --delay-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%deny-alt-svg-prop { + --deny-alt-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%deny-color-svg-prop { + --deny-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%deny-default-svg-prop { + --deny-default-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%deny-svg-prop { + --deny-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%disabled-svg-prop { + --disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%docs-svg-prop { + --docs-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%download-svg-prop { + --download-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%edit-svg-prop { + --edit-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%ember-circle-logo-color-svg-prop { + --ember-circle-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%envelope-sealed-fill-svg-prop { + --envelope-sealed-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%envelope-sealed-outline-svg-prop { + --envelope-sealed-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%envelope-unsealed--outline-svg-prop { + --envelope-unsealed--outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%envelope-unsealed-fill-svg-prop { + --envelope-unsealed-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%exit-svg-prop { + --exit-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%expand-less-svg-prop { + --expand-less-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%expand-more-svg-prop { + --expand-more-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-fill-svg-prop { + --file-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%file-outline-svg-prop { + --file-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%filter-svg-prop { + --filter-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%flag-svg-prop { + --flag-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%folder-fill-svg-prop { + --folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%folder-outline-color-svg-prop { + --folder-outline-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%folder-outline-svg-prop { + --folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%gateway-svg-prop { + --gateway-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%gift-fill-svg-prop { + --gift-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%gift-outline-svg-prop { + --gift-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%git-branch-svg-prop { + --git-branch-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%git-commit-svg-prop { + --git-commit-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%git-pull-request-svg-prop { + --git-pull-request-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%git-repository-svg-prop { + --git-repository-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%glimmer-logo-color-svg-prop { + --glimmer-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%hashicorp-logo-svg-prop { + --hashicorp-logo-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%health-svg-prop { + --health-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%help-circle-fill-svg-prop { + --help-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%help-circle-outline-svg-prop { + --help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%history-svg-prop { + --history-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%info-circle-fill-color-svg-prop { + --info-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%info-circle-fill-svg-prop { + --info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%info-circle-outline-svg-prop { + --info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%jwt-logo-svg-prop { + --jwt-logo-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%key-svg-prop { + --key-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%kubernetes-logo-color-svg-prop { + --kubernetes-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%layers-svg-prop { + --layers-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%learn-svg-prop { + --learn-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%link-svg-prop { + --link-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%loading-svg-prop { + --loading-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%lock-closed-svg-prop { + --lock-closed-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%lock-disabled-svg-prop { + --lock-disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%lock-open-svg-prop { + --lock-open-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-alicloud-color-svg-prop { + --logo-alicloud-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-alicloud-monochrome-svg-prop { + --logo-alicloud-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-auth0-color-svg-prop { + --logo-auth0-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-aws-color-svg-prop { + --logo-aws-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-aws-monochrome-svg-prop { + --logo-aws-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-azure-color-svg-prop { + --logo-azure-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-azure-monochrome-svg-prop { + --logo-azure-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-bitbucket-color-svg-prop { + --logo-bitbucket-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-bitbucket-monochrome-svg-prop { + --logo-bitbucket-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-consul-color-svg-prop { + --logo-consul-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-gcp-color-svg-prop { + --logo-gcp-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-gcp-monochrome-svg-prop { + --logo-gcp-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-github-color-svg-prop { + --logo-github-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-github-monochrome-svg-prop { + --logo-github-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-gitlab-color-svg-prop { + --logo-gitlab-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-gitlab-monochrome-svg-prop { + --logo-gitlab-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-google-color-svg-prop { + --logo-google-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-kubernetes-color-svg-prop { + --logo-kubernetes-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-kubernetes-monochrome-svg-prop { + --logo-kubernetes-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-microsoft-color-svg-prop { + --logo-microsoft-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-nomad-color-svg-prop { + --logo-nomad-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-okta-color-svg-prop { + --logo-okta-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-oracle-color-svg-prop { + --logo-oracle-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-oracle-monochrome-svg-prop { + --logo-oracle-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-slack-color-svg-prop { + --logo-slack-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-slack-monochrome-svg-prop { + --logo-slack-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-terraform-color-svg-prop { + --logo-terraform-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-vmware-color-svg-prop { + --logo-vmware-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-vmware-monochrome-svg-prop { + --logo-vmware-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%menu-svg-prop { + --menu-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%mesh-svg-prop { + --mesh-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%message-svg-prop { + --message-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-circle-fill-svg-prop { + --minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-circle-outline-svg-prop { + --minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-plain-svg-prop { + --minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-square-fill-color-svg-prop { + --minus-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-square-fill-svg-prop { + --minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%minus-svg-prop { + --minus-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%module-svg-prop { + --module-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%more-horizontal-svg-prop { + --more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%more-vertical-svg-prop { + --more-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%nomad-logo-color-svg-prop { + --nomad-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%notification-disabled-svg-prop { + --notification-disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%notification-fill-svg-prop { + --notification-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%notification-outline-svg-prop { + --notification-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%oidc-logo-svg-prop { + --oidc-logo-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%outline-svg-prop { + --outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%page-outline-svg-prop { + --page-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%partner-svg-prop { + --partner-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%path-svg-prop { + --path-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%plus-circle-fill-svg-prop { + --plus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%plus-circle-outline-svg-prop { + --plus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%plus-plain-svg-prop { + --plus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%plus-square-fill-svg-prop { + --plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%port-svg-prop { + --port-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%protocol-svg-prop { + --protocol-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%provider-svg-prop { + --provider-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%public-default-svg-prop { + --public-default-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%public-locked-svg-prop { + --public-locked-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%queue-svg-prop { + --queue-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%radio-button-checked-svg-prop { + --radio-button-checked-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%radio-button-unchecked-svg-prop { + --radio-button-unchecked-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%random-svg-prop { + --random-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%redirect-svg-prop { + --redirect-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%refresh-alert-svg-prop { + --refresh-alert-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%refresh-default-svg-prop { + --refresh-default-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%remix-svg-prop { + --remix-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%ribbon-svg-prop { + --ribbon-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%run-svg-prop { + --run-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%search-color-svg-prop { + --search-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%search-svg-prop { + --search-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%service-identity-svg-prop { + --service-identity-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%settings-svg-prop { + --settings-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sort-svg-prop { + --sort-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%source-file-svg-prop { + --source-file-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%star-fill-svg-prop { + --star-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%star-outline-svg-prop { + --star-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%star-svg-prop { + --star-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sub-left-svg-prop { + --sub-left-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%sub-right-svg-prop { + --sub-right-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%support-svg-prop { + --support-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%swap-horizontal-svg-prop { + --swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%swap-vertical-svg-prop { + --swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%tag-svg-prop { + --tag-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%terraform-logo-color-svg-prop { + --terraform-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%trash-svg-prop { + --trash-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%tune-svg-prop { + --tune-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%unfold-less-svg-prop { + --unfold-less-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%unfold-more-svg-prop { + --unfold-more-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%upload-svg-prop { + --upload-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%user-add-svg-prop { + --user-add-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%user-organization-svg-prop { + --user-organization-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%user-plain-svg-prop { + --user-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%user-square-fill-svg-prop { + --user-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%user-square-outline-svg-prop { + --user-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%user-team-svg-prop { + --user-team-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%visibility-hide-svg-prop { + --visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%visibility-show-svg-prop { + --visibility-show-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%webhook-svg-prop { + --webhook-svg: url('data:image/svg+xml;charset=UTF-8,'); +} diff --git a/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss index 082ff1cc1..2da19892f 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss @@ -1,1882 +1,1905 @@ %with-alert-circle-fill-icon { - @extend %with-icon; - background-image: $alert-circle-fill-svg; + @extend %with-icon, %alert-circle-fill-svg-prop; + background-image: var(--alert-circle-fill-svg); } %with-alert-circle-fill-mask { - @extend %with-mask; - -webkit-mask-image: $alert-circle-fill-svg; - mask-image: $alert-circle-fill-svg; + @extend %with-mask, %alert-circle-fill-svg-prop; + -webkit-mask-image: var(--alert-circle-fill-svg); + mask-image: var(--alert-circle-fill-svg); } %with-alert-circle-outline-icon { - @extend %with-icon; - background-image: $alert-circle-outline-svg; + @extend %with-icon, %alert-circle-outline-svg-prop; + background-image: var(--alert-circle-outline-svg); } %with-alert-circle-outline-mask { - @extend %with-mask; - -webkit-mask-image: $alert-circle-outline-svg; - mask-image: $alert-circle-outline-svg; + @extend %with-mask, %alert-circle-outline-svg-prop; + -webkit-mask-image: var(--alert-circle-outline-svg); + mask-image: var(--alert-circle-outline-svg); } %with-alert-triangle-color-icon { - @extend %with-icon; - background-image: $alert-triangle-color-svg; + @extend %with-icon, %alert-triangle-color-svg-prop; + background-image: var(--alert-triangle-color-svg); } %with-alert-triangle-color-mask { - @extend %with-mask; - -webkit-mask-image: $alert-triangle-color-svg; - mask-image: $alert-triangle-color-svg; + @extend %with-mask, %alert-triangle-color-svg-prop; + -webkit-mask-image: var(--alert-triangle-color-svg); + mask-image: var(--alert-triangle-color-svg); } %with-alert-triangle-icon { - @extend %with-icon; - background-image: $alert-triangle-svg; + @extend %with-icon, %alert-triangle-svg-prop; + background-image: var(--alert-triangle-svg); } %with-alert-triangle-mask { - @extend %with-mask; - -webkit-mask-image: $alert-triangle-svg; - mask-image: $alert-triangle-svg; + @extend %with-mask, %alert-triangle-svg-prop; + -webkit-mask-image: var(--alert-triangle-svg); + mask-image: var(--alert-triangle-svg); } %with-arrow-down-icon { - @extend %with-icon; - background-image: $arrow-down-svg; + @extend %with-icon, %arrow-down-svg-prop; + background-image: var(--arrow-down-svg); } %with-arrow-down-mask { - @extend %with-mask; - -webkit-mask-image: $arrow-down-svg; - mask-image: $arrow-down-svg; + @extend %with-mask, %arrow-down-svg-prop; + -webkit-mask-image: var(--arrow-down-svg); + mask-image: var(--arrow-down-svg); } %with-arrow-left-icon { - @extend %with-icon; - background-image: $arrow-left-svg; + @extend %with-icon, %arrow-left-svg-prop; + background-image: var(--arrow-left-svg); } %with-arrow-left-mask { - @extend %with-mask; - -webkit-mask-image: $arrow-left-svg; - mask-image: $arrow-left-svg; + @extend %with-mask, %arrow-left-svg-prop; + -webkit-mask-image: var(--arrow-left-svg); + mask-image: var(--arrow-left-svg); } %with-arrow-right-color-icon { - @extend %with-icon; - background-image: $arrow-right-color-svg; + @extend %with-icon, %arrow-right-color-svg-prop; + background-image: var(--arrow-right-color-svg); } %with-arrow-right-color-mask { - @extend %with-mask; - -webkit-mask-image: $arrow-right-color-svg; - mask-image: $arrow-right-color-svg; + @extend %with-mask, %arrow-right-color-svg-prop; + -webkit-mask-image: var(--arrow-right-color-svg); + mask-image: var(--arrow-right-color-svg); } %with-arrow-right-icon { - @extend %with-icon; - background-image: $arrow-right-svg; + @extend %with-icon, %arrow-right-svg-prop; + background-image: var(--arrow-right-svg); } %with-arrow-right-mask { - @extend %with-mask; - -webkit-mask-image: $arrow-right-svg; - mask-image: $arrow-right-svg; + @extend %with-mask, %arrow-right-svg-prop; + -webkit-mask-image: var(--arrow-right-svg); + mask-image: var(--arrow-right-svg); } %with-arrow-up-icon { - @extend %with-icon; - background-image: $arrow-up-svg; + @extend %with-icon, %arrow-up-svg-prop; + background-image: var(--arrow-up-svg); } %with-arrow-up-mask { - @extend %with-mask; - -webkit-mask-image: $arrow-up-svg; - mask-image: $arrow-up-svg; + @extend %with-mask, %arrow-up-svg-prop; + -webkit-mask-image: var(--arrow-up-svg); + mask-image: var(--arrow-up-svg); +} + +%with-aws-logo-color-icon { + @extend %with-icon, %aws-logo-color-svg-prop; + background-image: var(--aws-logo-color-svg); +} +%with-aws-logo-color-mask { + @extend %with-mask, %aws-logo-color-svg-prop; + -webkit-mask-image: var(--aws-logo-color-svg); + mask-image: var(--aws-logo-color-svg); } %with-bolt-icon { - @extend %with-icon; - background-image: $bolt-svg; + @extend %with-icon, %bolt-svg-prop; + background-image: var(--bolt-svg); } %with-bolt-mask { - @extend %with-mask; - -webkit-mask-image: $bolt-svg; - mask-image: $bolt-svg; + @extend %with-mask, %bolt-svg-prop; + -webkit-mask-image: var(--bolt-svg); + mask-image: var(--bolt-svg); } %with-box-check-fill-icon { - @extend %with-icon; - background-image: $box-check-fill-svg; + @extend %with-icon, %box-check-fill-svg-prop; + background-image: var(--box-check-fill-svg); } %with-box-check-fill-mask { - @extend %with-mask; - -webkit-mask-image: $box-check-fill-svg; - mask-image: $box-check-fill-svg; + @extend %with-mask, %box-check-fill-svg-prop; + -webkit-mask-image: var(--box-check-fill-svg); + mask-image: var(--box-check-fill-svg); } %with-box-outline-icon { - @extend %with-icon; - background-image: $box-outline-svg; + @extend %with-icon, %box-outline-svg-prop; + background-image: var(--box-outline-svg); } %with-box-outline-mask { - @extend %with-mask; - -webkit-mask-image: $box-outline-svg; - mask-image: $box-outline-svg; + @extend %with-mask, %box-outline-svg-prop; + -webkit-mask-image: var(--box-outline-svg); + mask-image: var(--box-outline-svg); } %with-bug-icon { - @extend %with-icon; - background-image: $bug-svg; + @extend %with-icon, %bug-svg-prop; + background-image: var(--bug-svg); } %with-bug-mask { - @extend %with-mask; - -webkit-mask-image: $bug-svg; - mask-image: $bug-svg; + @extend %with-mask, %bug-svg-prop; + -webkit-mask-image: var(--bug-svg); + mask-image: var(--bug-svg); } %with-calendar-icon { - @extend %with-icon; - background-image: $calendar-svg; + @extend %with-icon, %calendar-svg-prop; + background-image: var(--calendar-svg); } %with-calendar-mask { - @extend %with-mask; - -webkit-mask-image: $calendar-svg; - mask-image: $calendar-svg; + @extend %with-mask, %calendar-svg-prop; + -webkit-mask-image: var(--calendar-svg); + mask-image: var(--calendar-svg); } %with-cancel-circle-fill-icon { - @extend %with-icon; - background-image: $cancel-circle-fill-svg; + @extend %with-icon, %cancel-circle-fill-svg-prop; + background-image: var(--cancel-circle-fill-svg); } %with-cancel-circle-fill-mask { - @extend %with-mask; - -webkit-mask-image: $cancel-circle-fill-svg; - mask-image: $cancel-circle-fill-svg; + @extend %with-mask, %cancel-circle-fill-svg-prop; + -webkit-mask-image: var(--cancel-circle-fill-svg); + mask-image: var(--cancel-circle-fill-svg); } %with-cancel-circle-outline-icon { - @extend %with-icon; - background-image: $cancel-circle-outline-svg; + @extend %with-icon, %cancel-circle-outline-svg-prop; + background-image: var(--cancel-circle-outline-svg); } %with-cancel-circle-outline-mask { - @extend %with-mask; - -webkit-mask-image: $cancel-circle-outline-svg; - mask-image: $cancel-circle-outline-svg; + @extend %with-mask, %cancel-circle-outline-svg-prop; + -webkit-mask-image: var(--cancel-circle-outline-svg); + mask-image: var(--cancel-circle-outline-svg); } %with-cancel-plain-icon { - @extend %with-icon; - background-image: $cancel-plain-svg; + @extend %with-icon, %cancel-plain-svg-prop; + background-image: var(--cancel-plain-svg); } %with-cancel-plain-mask { - @extend %with-mask; - -webkit-mask-image: $cancel-plain-svg; - mask-image: $cancel-plain-svg; + @extend %with-mask, %cancel-plain-svg-prop; + -webkit-mask-image: var(--cancel-plain-svg); + mask-image: var(--cancel-plain-svg); } %with-cancel-square-fill-color-icon { - @extend %with-icon; - background-image: $cancel-square-fill-color-svg; + @extend %with-icon, %cancel-square-fill-color-svg-prop; + background-image: var(--cancel-square-fill-color-svg); } %with-cancel-square-fill-color-mask { - @extend %with-mask; - -webkit-mask-image: $cancel-square-fill-color-svg; - mask-image: $cancel-square-fill-color-svg; + @extend %with-mask, %cancel-square-fill-color-svg-prop; + -webkit-mask-image: var(--cancel-square-fill-color-svg); + mask-image: var(--cancel-square-fill-color-svg); } %with-cancel-square-fill-icon { - @extend %with-icon; - background-image: $cancel-square-fill-svg; + @extend %with-icon, %cancel-square-fill-svg-prop; + background-image: var(--cancel-square-fill-svg); } %with-cancel-square-fill-mask { - @extend %with-mask; - -webkit-mask-image: $cancel-square-fill-svg; - mask-image: $cancel-square-fill-svg; + @extend %with-mask, %cancel-square-fill-svg-prop; + -webkit-mask-image: var(--cancel-square-fill-svg); + mask-image: var(--cancel-square-fill-svg); } %with-cancel-square-outline-icon { - @extend %with-icon; - background-image: $cancel-square-outline-svg; + @extend %with-icon, %cancel-square-outline-svg-prop; + background-image: var(--cancel-square-outline-svg); } %with-cancel-square-outline-mask { - @extend %with-mask; - -webkit-mask-image: $cancel-square-outline-svg; - mask-image: $cancel-square-outline-svg; + @extend %with-mask, %cancel-square-outline-svg-prop; + -webkit-mask-image: var(--cancel-square-outline-svg); + mask-image: var(--cancel-square-outline-svg); } %with-caret-down-icon { - @extend %with-icon; - background-image: $caret-down-svg; + @extend %with-icon, %caret-down-svg-prop; + background-image: var(--caret-down-svg); } %with-caret-down-mask { - @extend %with-mask; - -webkit-mask-image: $caret-down-svg; - mask-image: $caret-down-svg; + @extend %with-mask, %caret-down-svg-prop; + -webkit-mask-image: var(--caret-down-svg); + mask-image: var(--caret-down-svg); } %with-caret-up-icon { - @extend %with-icon; - background-image: $caret-up-svg; + @extend %with-icon, %caret-up-svg-prop; + background-image: var(--caret-up-svg); } %with-caret-up-mask { - @extend %with-mask; - -webkit-mask-image: $caret-up-svg; - mask-image: $caret-up-svg; + @extend %with-mask, %caret-up-svg-prop; + -webkit-mask-image: var(--caret-up-svg); + mask-image: var(--caret-up-svg); } %with-check-circle-fill-color-icon { - @extend %with-icon; - background-image: $check-circle-fill-color-svg; + @extend %with-icon, %check-circle-fill-color-svg-prop; + background-image: var(--check-circle-fill-color-svg); } %with-check-circle-fill-color-mask { - @extend %with-mask; - -webkit-mask-image: $check-circle-fill-color-svg; - mask-image: $check-circle-fill-color-svg; + @extend %with-mask, %check-circle-fill-color-svg-prop; + -webkit-mask-image: var(--check-circle-fill-color-svg); + mask-image: var(--check-circle-fill-color-svg); } %with-check-circle-fill-icon { - @extend %with-icon; - background-image: $check-circle-fill-svg; + @extend %with-icon, %check-circle-fill-svg-prop; + background-image: var(--check-circle-fill-svg); } %with-check-circle-fill-mask { - @extend %with-mask; - -webkit-mask-image: $check-circle-fill-svg; - mask-image: $check-circle-fill-svg; + @extend %with-mask, %check-circle-fill-svg-prop; + -webkit-mask-image: var(--check-circle-fill-svg); + mask-image: var(--check-circle-fill-svg); } %with-check-circle-outline-icon { - @extend %with-icon; - background-image: $check-circle-outline-svg; + @extend %with-icon, %check-circle-outline-svg-prop; + background-image: var(--check-circle-outline-svg); } %with-check-circle-outline-mask { - @extend %with-mask; - -webkit-mask-image: $check-circle-outline-svg; - mask-image: $check-circle-outline-svg; + @extend %with-mask, %check-circle-outline-svg-prop; + -webkit-mask-image: var(--check-circle-outline-svg); + mask-image: var(--check-circle-outline-svg); } %with-check-plain-icon { - @extend %with-icon; - background-image: $check-plain-svg; + @extend %with-icon, %check-plain-svg-prop; + background-image: var(--check-plain-svg); } %with-check-plain-mask { - @extend %with-mask; - -webkit-mask-image: $check-plain-svg; - mask-image: $check-plain-svg; + @extend %with-mask, %check-plain-svg-prop; + -webkit-mask-image: var(--check-plain-svg); + mask-image: var(--check-plain-svg); } %with-chevron-down-2-icon { - @extend %with-icon; - background-image: $chevron-down-2-svg; + @extend %with-icon, %chevron-down-2-svg-prop; + background-image: var(--chevron-down-2-svg); } %with-chevron-down-2-mask { - @extend %with-mask; - -webkit-mask-image: $chevron-down-2-svg; - mask-image: $chevron-down-2-svg; + @extend %with-mask, %chevron-down-2-svg-prop; + -webkit-mask-image: var(--chevron-down-2-svg); + mask-image: var(--chevron-down-2-svg); } %with-chevron-down-icon { - @extend %with-icon; - background-image: $chevron-down-svg; + @extend %with-icon, %chevron-down-svg-prop; + background-image: var(--chevron-down-svg); } %with-chevron-down-mask { - @extend %with-mask; - -webkit-mask-image: $chevron-down-svg; - mask-image: $chevron-down-svg; + @extend %with-mask, %chevron-down-svg-prop; + -webkit-mask-image: var(--chevron-down-svg); + mask-image: var(--chevron-down-svg); } %with-chevron-left-icon { - @extend %with-icon; - background-image: $chevron-left-svg; + @extend %with-icon, %chevron-left-svg-prop; + background-image: var(--chevron-left-svg); } %with-chevron-left-mask { - @extend %with-mask; - -webkit-mask-image: $chevron-left-svg; - mask-image: $chevron-left-svg; + @extend %with-mask, %chevron-left-svg-prop; + -webkit-mask-image: var(--chevron-left-svg); + mask-image: var(--chevron-left-svg); } %with-chevron-right-icon { - @extend %with-icon; - background-image: $chevron-right-svg; + @extend %with-icon, %chevron-right-svg-prop; + background-image: var(--chevron-right-svg); } %with-chevron-right-mask { - @extend %with-mask; - -webkit-mask-image: $chevron-right-svg; - mask-image: $chevron-right-svg; + @extend %with-mask, %chevron-right-svg-prop; + -webkit-mask-image: var(--chevron-right-svg); + mask-image: var(--chevron-right-svg); } %with-chevron-up-icon { - @extend %with-icon; - background-image: $chevron-up-svg; + @extend %with-icon, %chevron-up-svg-prop; + background-image: var(--chevron-up-svg); } %with-chevron-up-mask { - @extend %with-mask; - -webkit-mask-image: $chevron-up-svg; - mask-image: $chevron-up-svg; + @extend %with-mask, %chevron-up-svg-prop; + -webkit-mask-image: var(--chevron-up-svg); + mask-image: var(--chevron-up-svg); } %with-chevron-icon { - @extend %with-icon; - background-image: $chevron-svg; + @extend %with-icon, %chevron-svg-prop; + background-image: var(--chevron-svg); } %with-chevron-mask { - @extend %with-mask; - -webkit-mask-image: $chevron-svg; - mask-image: $chevron-svg; + @extend %with-mask, %chevron-svg-prop; + -webkit-mask-image: var(--chevron-svg); + mask-image: var(--chevron-svg); } %with-clock-fill-icon { - @extend %with-icon; - background-image: $clock-fill-svg; + @extend %with-icon, %clock-fill-svg-prop; + background-image: var(--clock-fill-svg); } %with-clock-fill-mask { - @extend %with-mask; - -webkit-mask-image: $clock-fill-svg; - mask-image: $clock-fill-svg; + @extend %with-mask, %clock-fill-svg-prop; + -webkit-mask-image: var(--clock-fill-svg); + mask-image: var(--clock-fill-svg); } %with-clock-outline-icon { - @extend %with-icon; - background-image: $clock-outline-svg; + @extend %with-icon, %clock-outline-svg-prop; + background-image: var(--clock-outline-svg); } %with-clock-outline-mask { - @extend %with-mask; - -webkit-mask-image: $clock-outline-svg; - mask-image: $clock-outline-svg; + @extend %with-mask, %clock-outline-svg-prop; + -webkit-mask-image: var(--clock-outline-svg); + mask-image: var(--clock-outline-svg); } %with-cloud-cross-icon { - @extend %with-icon; - background-image: $cloud-cross-svg; + @extend %with-icon, %cloud-cross-svg-prop; + background-image: var(--cloud-cross-svg); } %with-cloud-cross-mask { - @extend %with-mask; - -webkit-mask-image: $cloud-cross-svg; - mask-image: $cloud-cross-svg; + @extend %with-mask, %cloud-cross-svg-prop; + -webkit-mask-image: var(--cloud-cross-svg); + mask-image: var(--cloud-cross-svg); } %with-code-icon { - @extend %with-icon; - background-image: $code-svg; + @extend %with-icon, %code-svg-prop; + background-image: var(--code-svg); } %with-code-mask { - @extend %with-mask; - -webkit-mask-image: $code-svg; - mask-image: $code-svg; + @extend %with-mask, %code-svg-prop; + -webkit-mask-image: var(--code-svg); + mask-image: var(--code-svg); } %with-consul-logo-color-icon { - @extend %with-icon; - background-image: $consul-logo-color-svg; + @extend %with-icon, %consul-logo-color-svg-prop; + background-image: var(--consul-logo-color-svg); } %with-consul-logo-color-mask { - @extend %with-mask; - -webkit-mask-image: $consul-logo-color-svg; - mask-image: $consul-logo-color-svg; + @extend %with-mask, %consul-logo-color-svg-prop; + -webkit-mask-image: var(--consul-logo-color-svg); + mask-image: var(--consul-logo-color-svg); } %with-copy-action-icon { - @extend %with-icon; - background-image: $copy-action-svg; + @extend %with-icon, %copy-action-svg-prop; + background-image: var(--copy-action-svg); } %with-copy-action-mask { - @extend %with-mask; - -webkit-mask-image: $copy-action-svg; - mask-image: $copy-action-svg; + @extend %with-mask, %copy-action-svg-prop; + -webkit-mask-image: var(--copy-action-svg); + mask-image: var(--copy-action-svg); } %with-copy-success-icon { - @extend %with-icon; - background-image: $copy-success-svg; + @extend %with-icon, %copy-success-svg-prop; + background-image: var(--copy-success-svg); } %with-copy-success-mask { - @extend %with-mask; - -webkit-mask-image: $copy-success-svg; - mask-image: $copy-success-svg; + @extend %with-mask, %copy-success-svg-prop; + -webkit-mask-image: var(--copy-success-svg); + mask-image: var(--copy-success-svg); } %with-database-icon { - @extend %with-icon; - background-image: $database-svg; + @extend %with-icon, %database-svg-prop; + background-image: var(--database-svg); } %with-database-mask { - @extend %with-mask; - -webkit-mask-image: $database-svg; - mask-image: $database-svg; + @extend %with-mask, %database-svg-prop; + -webkit-mask-image: var(--database-svg); + mask-image: var(--database-svg); } %with-delay-icon { - @extend %with-icon; - background-image: $delay-svg; + @extend %with-icon, %delay-svg-prop; + background-image: var(--delay-svg); } %with-delay-mask { - @extend %with-mask; - -webkit-mask-image: $delay-svg; - mask-image: $delay-svg; + @extend %with-mask, %delay-svg-prop; + -webkit-mask-image: var(--delay-svg); + mask-image: var(--delay-svg); } %with-deny-alt-icon { - @extend %with-icon; - background-image: $deny-alt-svg; + @extend %with-icon, %deny-alt-svg-prop; + background-image: var(--deny-alt-svg); } %with-deny-alt-mask { - @extend %with-mask; - -webkit-mask-image: $deny-alt-svg; - mask-image: $deny-alt-svg; + @extend %with-mask, %deny-alt-svg-prop; + -webkit-mask-image: var(--deny-alt-svg); + mask-image: var(--deny-alt-svg); } %with-deny-color-icon { - @extend %with-icon; - background-image: $deny-color-svg; + @extend %with-icon, %deny-color-svg-prop; + background-image: var(--deny-color-svg); } %with-deny-color-mask { - @extend %with-mask; - -webkit-mask-image: $deny-color-svg; - mask-image: $deny-color-svg; + @extend %with-mask, %deny-color-svg-prop; + -webkit-mask-image: var(--deny-color-svg); + mask-image: var(--deny-color-svg); } %with-deny-default-icon { - @extend %with-icon; - background-image: $deny-default-svg; + @extend %with-icon, %deny-default-svg-prop; + background-image: var(--deny-default-svg); } %with-deny-default-mask { - @extend %with-mask; - -webkit-mask-image: $deny-default-svg; - mask-image: $deny-default-svg; + @extend %with-mask, %deny-default-svg-prop; + -webkit-mask-image: var(--deny-default-svg); + mask-image: var(--deny-default-svg); } %with-deny-icon { - @extend %with-icon; - background-image: $deny-svg; + @extend %with-icon, %deny-svg-prop; + background-image: var(--deny-svg); } %with-deny-mask { - @extend %with-mask; - -webkit-mask-image: $deny-svg; - mask-image: $deny-svg; + @extend %with-mask, %deny-svg-prop; + -webkit-mask-image: var(--deny-svg); + mask-image: var(--deny-svg); } %with-disabled-icon { - @extend %with-icon; - background-image: $disabled-svg; + @extend %with-icon, %disabled-svg-prop; + background-image: var(--disabled-svg); } %with-disabled-mask { - @extend %with-mask; - -webkit-mask-image: $disabled-svg; - mask-image: $disabled-svg; + @extend %with-mask, %disabled-svg-prop; + -webkit-mask-image: var(--disabled-svg); + mask-image: var(--disabled-svg); } %with-docs-icon { - @extend %with-icon; - background-image: $docs-svg; + @extend %with-icon, %docs-svg-prop; + background-image: var(--docs-svg); } %with-docs-mask { - @extend %with-mask; - -webkit-mask-image: $docs-svg; - mask-image: $docs-svg; + @extend %with-mask, %docs-svg-prop; + -webkit-mask-image: var(--docs-svg); + mask-image: var(--docs-svg); } %with-download-icon { - @extend %with-icon; - background-image: $download-svg; + @extend %with-icon, %download-svg-prop; + background-image: var(--download-svg); } %with-download-mask { - @extend %with-mask; - -webkit-mask-image: $download-svg; - mask-image: $download-svg; + @extend %with-mask, %download-svg-prop; + -webkit-mask-image: var(--download-svg); + mask-image: var(--download-svg); } %with-edit-icon { - @extend %with-icon; - background-image: $edit-svg; + @extend %with-icon, %edit-svg-prop; + background-image: var(--edit-svg); } %with-edit-mask { - @extend %with-mask; - -webkit-mask-image: $edit-svg; - mask-image: $edit-svg; + @extend %with-mask, %edit-svg-prop; + -webkit-mask-image: var(--edit-svg); + mask-image: var(--edit-svg); } %with-ember-circle-logo-color-icon { - @extend %with-icon; - background-image: $ember-circle-logo-color-svg; + @extend %with-icon, %ember-circle-logo-color-svg-prop; + background-image: var(--ember-circle-logo-color-svg); +} +%with-ember-circle-logo-color-mask { + @extend %with-mask, %ember-circle-logo-color-svg-prop; + -webkit-mask-image: var(--ember-circle-logo-color-svg); + mask-image: var(--ember-circle-logo-color-svg); } %with-envelope-sealed-fill-icon { - @extend %with-icon; - background-image: $envelope-sealed-fill-svg; + @extend %with-icon, %envelope-sealed-fill-svg-prop; + background-image: var(--envelope-sealed-fill-svg); } %with-envelope-sealed-fill-mask { - @extend %with-mask; - -webkit-mask-image: $envelope-sealed-fill-svg; - mask-image: $envelope-sealed-fill-svg; + @extend %with-mask, %envelope-sealed-fill-svg-prop; + -webkit-mask-image: var(--envelope-sealed-fill-svg); + mask-image: var(--envelope-sealed-fill-svg); } %with-envelope-sealed-outline-icon { - @extend %with-icon; - background-image: $envelope-sealed-outline-svg; + @extend %with-icon, %envelope-sealed-outline-svg-prop; + background-image: var(--envelope-sealed-outline-svg); } %with-envelope-sealed-outline-mask { - @extend %with-mask; - -webkit-mask-image: $envelope-sealed-outline-svg; - mask-image: $envelope-sealed-outline-svg; + @extend %with-mask, %envelope-sealed-outline-svg-prop; + -webkit-mask-image: var(--envelope-sealed-outline-svg); + mask-image: var(--envelope-sealed-outline-svg); } %with-envelope-unsealed--outline-icon { - @extend %with-icon; - background-image: $envelope-unsealed--outline-svg; + @extend %with-icon, %envelope-unsealed--outline-svg-prop; + background-image: var(--envelope-unsealed--outline-svg); } %with-envelope-unsealed--outline-mask { - @extend %with-mask; - -webkit-mask-image: $envelope-unsealed--outline-svg; - mask-image: $envelope-unsealed--outline-svg; + @extend %with-mask, %envelope-unsealed--outline-svg-prop; + -webkit-mask-image: var(--envelope-unsealed--outline-svg); + mask-image: var(--envelope-unsealed--outline-svg); } %with-envelope-unsealed-fill-icon { - @extend %with-icon; - background-image: $envelope-unsealed-fill-svg; + @extend %with-icon, %envelope-unsealed-fill-svg-prop; + background-image: var(--envelope-unsealed-fill-svg); } %with-envelope-unsealed-fill-mask { - @extend %with-mask; - -webkit-mask-image: $envelope-unsealed-fill-svg; - mask-image: $envelope-unsealed-fill-svg; + @extend %with-mask, %envelope-unsealed-fill-svg-prop; + -webkit-mask-image: var(--envelope-unsealed-fill-svg); + mask-image: var(--envelope-unsealed-fill-svg); } %with-exit-icon { - @extend %with-icon; - background-image: $exit-svg; + @extend %with-icon, %exit-svg-prop; + background-image: var(--exit-svg); } %with-exit-mask { - @extend %with-mask; - -webkit-mask-image: $exit-svg; - mask-image: $exit-svg; + @extend %with-mask, %exit-svg-prop; + -webkit-mask-image: var(--exit-svg); + mask-image: var(--exit-svg); } %with-expand-less-icon { - @extend %with-icon; - background-image: $expand-less-svg; + @extend %with-icon, %expand-less-svg-prop; + background-image: var(--expand-less-svg); } %with-expand-less-mask { - @extend %with-mask; - -webkit-mask-image: $expand-less-svg; - mask-image: $expand-less-svg; + @extend %with-mask, %expand-less-svg-prop; + -webkit-mask-image: var(--expand-less-svg); + mask-image: var(--expand-less-svg); } %with-expand-more-icon { - @extend %with-icon; - background-image: $expand-more-svg; + @extend %with-icon, %expand-more-svg-prop; + background-image: var(--expand-more-svg); } %with-expand-more-mask { - @extend %with-mask; - -webkit-mask-image: $expand-more-svg; - mask-image: $expand-more-svg; + @extend %with-mask, %expand-more-svg-prop; + -webkit-mask-image: var(--expand-more-svg); + mask-image: var(--expand-more-svg); } %with-file-fill-icon { - @extend %with-icon; - background-image: $file-fill-svg; + @extend %with-icon, %file-fill-svg-prop; + background-image: var(--file-fill-svg); } %with-file-fill-mask { - @extend %with-mask; - -webkit-mask-image: $file-fill-svg; - mask-image: $file-fill-svg; + @extend %with-mask, %file-fill-svg-prop; + -webkit-mask-image: var(--file-fill-svg); + mask-image: var(--file-fill-svg); } %with-file-outline-icon { - @extend %with-icon; - background-image: $file-outline-svg; + @extend %with-icon, %file-outline-svg-prop; + background-image: var(--file-outline-svg); } %with-file-outline-mask { - @extend %with-mask; - -webkit-mask-image: $file-outline-svg; - mask-image: $file-outline-svg; + @extend %with-mask, %file-outline-svg-prop; + -webkit-mask-image: var(--file-outline-svg); + mask-image: var(--file-outline-svg); } %with-filter-icon { - @extend %with-icon; - background-image: $filter-svg; + @extend %with-icon, %filter-svg-prop; + background-image: var(--filter-svg); } %with-filter-mask { - @extend %with-mask; - -webkit-mask-image: $filter-svg; - mask-image: $filter-svg; + @extend %with-mask, %filter-svg-prop; + -webkit-mask-image: var(--filter-svg); + mask-image: var(--filter-svg); } %with-flag-icon { - @extend %with-icon; - background-image: $flag-svg; + @extend %with-icon, %flag-svg-prop; + background-image: var(--flag-svg); } %with-flag-mask { - @extend %with-mask; - -webkit-mask-image: $flag-svg; - mask-image: $flag-svg; + @extend %with-mask, %flag-svg-prop; + -webkit-mask-image: var(--flag-svg); + mask-image: var(--flag-svg); } %with-folder-fill-icon { - @extend %with-icon; - background-image: $folder-fill-svg; + @extend %with-icon, %folder-fill-svg-prop; + background-image: var(--folder-fill-svg); } %with-folder-fill-mask { - @extend %with-mask; - -webkit-mask-image: $folder-fill-svg; - mask-image: $folder-fill-svg; + @extend %with-mask, %folder-fill-svg-prop; + -webkit-mask-image: var(--folder-fill-svg); + mask-image: var(--folder-fill-svg); } %with-folder-outline-color-icon { - @extend %with-icon; - background-image: $folder-outline-color-svg; + @extend %with-icon, %folder-outline-color-svg-prop; + background-image: var(--folder-outline-color-svg); } %with-folder-outline-color-mask { - @extend %with-mask; - -webkit-mask-image: $folder-outline-color-svg; - mask-image: $folder-outline-color-svg; + @extend %with-mask, %folder-outline-color-svg-prop; + -webkit-mask-image: var(--folder-outline-color-svg); + mask-image: var(--folder-outline-color-svg); } %with-folder-outline-icon { - @extend %with-icon; - background-image: $folder-outline-svg; + @extend %with-icon, %folder-outline-svg-prop; + background-image: var(--folder-outline-svg); } %with-folder-outline-mask { - @extend %with-mask; - -webkit-mask-image: $folder-outline-svg; - mask-image: $folder-outline-svg; + @extend %with-mask, %folder-outline-svg-prop; + -webkit-mask-image: var(--folder-outline-svg); + mask-image: var(--folder-outline-svg); } %with-gateway-icon { - @extend %with-icon; - background-image: $gateway-svg; + @extend %with-icon, %gateway-svg-prop; + background-image: var(--gateway-svg); } %with-gateway-mask { - @extend %with-mask; - -webkit-mask-image: $gateway-svg; - mask-image: $gateway-svg; + @extend %with-mask, %gateway-svg-prop; + -webkit-mask-image: var(--gateway-svg); + mask-image: var(--gateway-svg); } %with-gift-fill-icon { - @extend %with-icon; - background-image: $gift-fill-svg; + @extend %with-icon, %gift-fill-svg-prop; + background-image: var(--gift-fill-svg); } %with-gift-fill-mask { - @extend %with-mask; - -webkit-mask-image: $gift-fill-svg; - mask-image: $gift-fill-svg; + @extend %with-mask, %gift-fill-svg-prop; + -webkit-mask-image: var(--gift-fill-svg); + mask-image: var(--gift-fill-svg); } %with-gift-outline-icon { - @extend %with-icon; - background-image: $gift-outline-svg; + @extend %with-icon, %gift-outline-svg-prop; + background-image: var(--gift-outline-svg); } %with-gift-outline-mask { - @extend %with-mask; - -webkit-mask-image: $gift-outline-svg; - mask-image: $gift-outline-svg; + @extend %with-mask, %gift-outline-svg-prop; + -webkit-mask-image: var(--gift-outline-svg); + mask-image: var(--gift-outline-svg); } %with-git-branch-icon { - @extend %with-icon; - background-image: $git-branch-svg; + @extend %with-icon, %git-branch-svg-prop; + background-image: var(--git-branch-svg); } %with-git-branch-mask { - @extend %with-mask; - -webkit-mask-image: $git-branch-svg; - mask-image: $git-branch-svg; + @extend %with-mask, %git-branch-svg-prop; + -webkit-mask-image: var(--git-branch-svg); + mask-image: var(--git-branch-svg); } %with-git-commit-icon { - @extend %with-icon; - background-image: $git-commit-svg; + @extend %with-icon, %git-commit-svg-prop; + background-image: var(--git-commit-svg); } %with-git-commit-mask { - @extend %with-mask; - -webkit-mask-image: $git-commit-svg; - mask-image: $git-commit-svg; + @extend %with-mask, %git-commit-svg-prop; + -webkit-mask-image: var(--git-commit-svg); + mask-image: var(--git-commit-svg); } %with-git-pull-request-icon { - @extend %with-icon; - background-image: $git-pull-request-svg; + @extend %with-icon, %git-pull-request-svg-prop; + background-image: var(--git-pull-request-svg); } %with-git-pull-request-mask { - @extend %with-mask; - -webkit-mask-image: $git-pull-request-svg; - mask-image: $git-pull-request-svg; + @extend %with-mask, %git-pull-request-svg-prop; + -webkit-mask-image: var(--git-pull-request-svg); + mask-image: var(--git-pull-request-svg); } %with-git-repository-icon { - @extend %with-icon; - background-image: $git-repository-svg; + @extend %with-icon, %git-repository-svg-prop; + background-image: var(--git-repository-svg); } %with-git-repository-mask { - @extend %with-mask; - -webkit-mask-image: $git-repository-svg; - mask-image: $git-repository-svg; + @extend %with-mask, %git-repository-svg-prop; + -webkit-mask-image: var(--git-repository-svg); + mask-image: var(--git-repository-svg); } %with-glimmer-logo-color-icon { - @extend %with-icon; - background-image: $glimmer-logo-color-svg; + @extend %with-icon, %glimmer-logo-color-svg-prop; + background-image: var(--glimmer-logo-color-svg); } +%with-glimmer-logo-color-mask { + @extend %with-mask, %glimmer-logo-color-svg-prop; + -webkit-mask-image: var(--glimmer-logo-color-svg); + mask-image: var(--glimmer-logo-color-svg); +} + %with-hashicorp-logo-icon { - @extend %with-icon; - background-image: $hashicorp-logo-svg; + @extend %with-icon, %hashicorp-logo-svg-prop; + background-image: var(--hashicorp-logo-svg); } %with-hashicorp-logo-mask { - @extend %with-mask; - -webkit-mask-image: $hashicorp-logo-svg; - mask-image: $hashicorp-logo-svg; + @extend %with-mask, %hashicorp-logo-svg-prop; + -webkit-mask-image: var(--hashicorp-logo-svg); + mask-image: var(--hashicorp-logo-svg); } %with-health-icon { - @extend %with-icon; - background-image: $health-svg; + @extend %with-icon, %health-svg-prop; + background-image: var(--health-svg); } %with-health-mask { - @extend %with-mask; - -webkit-mask-image: $health-svg; - mask-image: $health-svg; + @extend %with-mask, %health-svg-prop; + -webkit-mask-image: var(--health-svg); + mask-image: var(--health-svg); } %with-help-circle-fill-icon { - @extend %with-icon; - background-image: $help-circle-fill-svg; + @extend %with-icon, %help-circle-fill-svg-prop; + background-image: var(--help-circle-fill-svg); } %with-help-circle-fill-mask { - @extend %with-mask; - -webkit-mask-image: $help-circle-fill-svg; - mask-image: $help-circle-fill-svg; + @extend %with-mask, %help-circle-fill-svg-prop; + -webkit-mask-image: var(--help-circle-fill-svg); + mask-image: var(--help-circle-fill-svg); } %with-help-circle-outline-icon { - @extend %with-icon; - background-image: $help-circle-outline-svg; + @extend %with-icon, %help-circle-outline-svg-prop; + background-image: var(--help-circle-outline-svg); } %with-help-circle-outline-mask { - @extend %with-mask; - -webkit-mask-image: $help-circle-outline-svg; - mask-image: $help-circle-outline-svg; + @extend %with-mask, %help-circle-outline-svg-prop; + -webkit-mask-image: var(--help-circle-outline-svg); + mask-image: var(--help-circle-outline-svg); } %with-history-icon { - @extend %with-icon; - background-image: $history-svg; + @extend %with-icon, %history-svg-prop; + background-image: var(--history-svg); } %with-history-mask { - @extend %with-mask; - -webkit-mask-image: $history-svg; - mask-image: $history-svg; + @extend %with-mask, %history-svg-prop; + -webkit-mask-image: var(--history-svg); + mask-image: var(--history-svg); } %with-info-circle-fill-color-icon { - @extend %with-icon; - background-image: $info-circle-fill-color-svg; + @extend %with-icon, %info-circle-fill-color-svg-prop; + background-image: var(--info-circle-fill-color-svg); } %with-info-circle-fill-color-mask { - @extend %with-mask; - -webkit-mask-image: $info-circle-fill-color-svg; - mask-image: $info-circle-fill-color-svg; + @extend %with-mask, %info-circle-fill-color-svg-prop; + -webkit-mask-image: var(--info-circle-fill-color-svg); + mask-image: var(--info-circle-fill-color-svg); } %with-info-circle-fill-icon { - @extend %with-icon; - background-image: $info-circle-fill-svg; + @extend %with-icon, %info-circle-fill-svg-prop; + background-image: var(--info-circle-fill-svg); } %with-info-circle-fill-mask { - @extend %with-mask; - -webkit-mask-image: $info-circle-fill-svg; - mask-image: $info-circle-fill-svg; + @extend %with-mask, %info-circle-fill-svg-prop; + -webkit-mask-image: var(--info-circle-fill-svg); + mask-image: var(--info-circle-fill-svg); } %with-info-circle-outline-icon { - @extend %with-icon; - background-image: $info-circle-outline-svg; + @extend %with-icon, %info-circle-outline-svg-prop; + background-image: var(--info-circle-outline-svg); } %with-info-circle-outline-mask { - @extend %with-mask; - -webkit-mask-image: $info-circle-outline-svg; - mask-image: $info-circle-outline-svg; + @extend %with-mask, %info-circle-outline-svg-prop; + -webkit-mask-image: var(--info-circle-outline-svg); + mask-image: var(--info-circle-outline-svg); } %with-jwt-logo-icon { - @extend %with-icon; - background-image: $jwt-logo-svg; + @extend %with-icon, %jwt-logo-svg-prop; + background-image: var(--jwt-logo-svg); } %with-jwt-logo-mask { - @extend %with-mask; - -webkit-mask-image: $jwt-logo-svg; - mask-image: $jwt-logo-svg; + @extend %with-mask, %jwt-logo-svg-prop; + -webkit-mask-image: var(--jwt-logo-svg); + mask-image: var(--jwt-logo-svg); } %with-key-icon { - @extend %with-icon; - background-image: $key-svg; + @extend %with-icon, %key-svg-prop; + background-image: var(--key-svg); } %with-key-mask { - @extend %with-mask; - -webkit-mask-image: $key-svg; - mask-image: $key-svg; + @extend %with-mask, %key-svg-prop; + -webkit-mask-image: var(--key-svg); + mask-image: var(--key-svg); } %with-kubernetes-logo-color-icon { - @extend %with-icon; - background-image: $kubernetes-logo-color-svg; + @extend %with-icon, %kubernetes-logo-color-svg-prop; + background-image: var(--kubernetes-logo-color-svg); } %with-kubernetes-logo-color-mask { - @extend %with-mask; - -webkit-mask-image: $kubernetes-logo-color-svg; - mask-image: $kubernetes-logo-color-svg; -} - -%with-learn-icon { - @extend %with-icon; - background-image: $learn-svg; -} -%with-learn-mask { - @extend %with-mask; - -webkit-mask-image: $learn-svg; - mask-image: $learn-svg; + @extend %with-mask, %kubernetes-logo-color-svg-prop; + -webkit-mask-image: var(--kubernetes-logo-color-svg); + mask-image: var(--kubernetes-logo-color-svg); } %with-layers-icon { - @extend %with-icon; - background-image: $layers-svg; + @extend %with-icon, %layers-svg-prop; + background-image: var(--layers-svg); } %with-layers-mask { - @extend %with-mask; - -webkit-mask-image: $layers-svg; - mask-image: $layers-svg; + @extend %with-mask, %layers-svg-prop; + -webkit-mask-image: var(--layers-svg); + mask-image: var(--layers-svg); +} + +%with-learn-icon { + @extend %with-icon, %learn-svg-prop; + background-image: var(--learn-svg); +} +%with-learn-mask { + @extend %with-mask, %learn-svg-prop; + -webkit-mask-image: var(--learn-svg); + mask-image: var(--learn-svg); } %with-link-icon { - @extend %with-icon; - background-image: $link-svg; + @extend %with-icon, %link-svg-prop; + background-image: var(--link-svg); } %with-link-mask { - @extend %with-mask; - -webkit-mask-image: $link-svg; - mask-image: $link-svg; + @extend %with-mask, %link-svg-prop; + -webkit-mask-image: var(--link-svg); + mask-image: var(--link-svg); } %with-loading-icon { - @extend %with-icon; - background-image: $loading-svg; + @extend %with-icon, %loading-svg-prop; + background-image: var(--loading-svg); } %with-loading-mask { - @extend %with-mask; - -webkit-mask-image: $loading-svg; - mask-image: $loading-svg; + @extend %with-mask, %loading-svg-prop; + -webkit-mask-image: var(--loading-svg); + mask-image: var(--loading-svg); } %with-lock-closed-icon { - @extend %with-icon; - background-image: $lock-closed-svg; + @extend %with-icon, %lock-closed-svg-prop; + background-image: var(--lock-closed-svg); } %with-lock-closed-mask { - @extend %with-mask; - -webkit-mask-image: $lock-closed-svg; - mask-image: $lock-closed-svg; + @extend %with-mask, %lock-closed-svg-prop; + -webkit-mask-image: var(--lock-closed-svg); + mask-image: var(--lock-closed-svg); } %with-lock-disabled-icon { - @extend %with-icon; - background-image: $lock-disabled-svg; + @extend %with-icon, %lock-disabled-svg-prop; + background-image: var(--lock-disabled-svg); } %with-lock-disabled-mask { - @extend %with-mask; - -webkit-mask-image: $lock-disabled-svg; - mask-image: $lock-disabled-svg; + @extend %with-mask, %lock-disabled-svg-prop; + -webkit-mask-image: var(--lock-disabled-svg); + mask-image: var(--lock-disabled-svg); } %with-lock-open-icon { - @extend %with-icon; - background-image: $lock-open-svg; + @extend %with-icon, %lock-open-svg-prop; + background-image: var(--lock-open-svg); } %with-lock-open-mask { - @extend %with-mask; - -webkit-mask-image: $lock-open-svg; - mask-image: $lock-open-svg; + @extend %with-mask, %lock-open-svg-prop; + -webkit-mask-image: var(--lock-open-svg); + mask-image: var(--lock-open-svg); } %with-logo-alicloud-color-icon { - @extend %with-icon; - background-image: $logo-alicloud-color-svg; + @extend %with-icon, %logo-alicloud-color-svg-prop; + background-image: var(--logo-alicloud-color-svg); } %with-logo-alicloud-color-mask { - @extend %with-mask; - -webkit-mask-image: $logo-alicloud-color-svg; - mask-image: $logo-alicloud-color-svg; + @extend %with-mask, %logo-alicloud-color-svg-prop; + -webkit-mask-image: var(--logo-alicloud-color-svg); + mask-image: var(--logo-alicloud-color-svg); } %with-logo-alicloud-monochrome-icon { - @extend %with-icon; - background-image: $logo-alicloud-monochrome-svg; + @extend %with-icon, %logo-alicloud-monochrome-svg-prop; + background-image: var(--logo-alicloud-monochrome-svg); } %with-logo-alicloud-monochrome-mask { - @extend %with-mask; - -webkit-mask-image: $logo-alicloud-monochrome-svg; - mask-image: $logo-alicloud-monochrome-svg; + @extend %with-mask, %logo-alicloud-monochrome-svg-prop; + -webkit-mask-image: var(--logo-alicloud-monochrome-svg); + mask-image: var(--logo-alicloud-monochrome-svg); } %with-logo-auth0-color-icon { - @extend %with-icon; - background-image: $logo-auth0-color-svg; + @extend %with-icon, %logo-auth0-color-svg-prop; + background-image: var(--logo-auth0-color-svg); } %with-logo-auth0-color-mask { - @extend %with-mask; - -webkit-mask-image: $logo-auth0-color-svg; - mask-image: $logo-auth0-color-svg; + @extend %with-mask, %logo-auth0-color-svg-prop; + -webkit-mask-image: var(--logo-auth0-color-svg); + mask-image: var(--logo-auth0-color-svg); } %with-logo-aws-color-icon { - @extend %with-icon; - background-image: $logo-aws-color-svg; + @extend %with-icon, %logo-aws-color-svg-prop; + background-image: var(--logo-aws-color-svg); } %with-logo-aws-color-mask { - @extend %with-mask; - -webkit-mask-image: $logo-aws-color-svg; - mask-image: $logo-aws-color-svg; + @extend %with-mask, %logo-aws-color-svg-prop; + -webkit-mask-image: var(--logo-aws-color-svg); + mask-image: var(--logo-aws-color-svg); } %with-logo-aws-monochrome-icon { - @extend %with-icon; - background-image: $logo-aws-monochrome-svg; + @extend %with-icon, %logo-aws-monochrome-svg-prop; + background-image: var(--logo-aws-monochrome-svg); } %with-logo-aws-monochrome-mask { - @extend %with-mask; - -webkit-mask-image: $logo-aws-monochrome-svg; - mask-image: $logo-aws-monochrome-svg; + @extend %with-mask, %logo-aws-monochrome-svg-prop; + -webkit-mask-image: var(--logo-aws-monochrome-svg); + mask-image: var(--logo-aws-monochrome-svg); } %with-logo-azure-color-icon { - @extend %with-icon; - background-image: $logo-azure-color-svg; + @extend %with-icon, %logo-azure-color-svg-prop; + background-image: var(--logo-azure-color-svg); } %with-logo-azure-color-mask { - @extend %with-mask; - -webkit-mask-image: $logo-azure-color-svg; - mask-image: $logo-azure-color-svg; + @extend %with-mask, %logo-azure-color-svg-prop; + -webkit-mask-image: var(--logo-azure-color-svg); + mask-image: var(--logo-azure-color-svg); } %with-logo-azure-monochrome-icon { - @extend %with-icon; - background-image: $logo-azure-monochrome-svg; + @extend %with-icon, %logo-azure-monochrome-svg-prop; + background-image: var(--logo-azure-monochrome-svg); } %with-logo-azure-monochrome-mask { - @extend %with-mask; - -webkit-mask-image: $logo-azure-monochrome-svg; - mask-image: $logo-azure-monochrome-svg; + @extend %with-mask, %logo-azure-monochrome-svg-prop; + -webkit-mask-image: var(--logo-azure-monochrome-svg); + mask-image: var(--logo-azure-monochrome-svg); } %with-logo-bitbucket-color-icon { - @extend %with-icon; - background-image: $logo-bitbucket-color-svg; + @extend %with-icon, %logo-bitbucket-color-svg-prop; + background-image: var(--logo-bitbucket-color-svg); } %with-logo-bitbucket-color-mask { - @extend %with-mask; - -webkit-mask-image: $logo-bitbucket-color-svg; - mask-image: $logo-bitbucket-color-svg; + @extend %with-mask, %logo-bitbucket-color-svg-prop; + -webkit-mask-image: var(--logo-bitbucket-color-svg); + mask-image: var(--logo-bitbucket-color-svg); } %with-logo-bitbucket-monochrome-icon { - @extend %with-icon; - background-image: $logo-bitbucket-monochrome-svg; + @extend %with-icon, %logo-bitbucket-monochrome-svg-prop; + background-image: var(--logo-bitbucket-monochrome-svg); } %with-logo-bitbucket-monochrome-mask { - @extend %with-mask; - -webkit-mask-image: $logo-bitbucket-monochrome-svg; - mask-image: $logo-bitbucket-monochrome-svg; + @extend %with-mask, %logo-bitbucket-monochrome-svg-prop; + -webkit-mask-image: var(--logo-bitbucket-monochrome-svg); + mask-image: var(--logo-bitbucket-monochrome-svg); } %with-logo-consul-color-icon { - @extend %with-icon; - background-image: $consul-logo-color-svg; + @extend %with-icon, %logo-consul-color-svg-prop; + background-image: var(--logo-consul-color-svg); } %with-logo-consul-color-mask { - @extend %with-mask; - -webkit-mask-image: $consul-logo-color-svg; - mask-image: $consul-logo-color-svg; + @extend %with-mask, %logo-consul-color-svg-prop; + -webkit-mask-image: var(--logo-consul-color-svg); + mask-image: var(--logo-consul-color-svg); } %with-logo-gcp-color-icon { - @extend %with-icon; - background-image: $logo-gcp-color-svg; + @extend %with-icon, %logo-gcp-color-svg-prop; + background-image: var(--logo-gcp-color-svg); } %with-logo-gcp-color-mask { - @extend %with-mask; - -webkit-mask-image: $logo-gcp-color-svg; - mask-image: $logo-gcp-color-svg; + @extend %with-mask, %logo-gcp-color-svg-prop; + -webkit-mask-image: var(--logo-gcp-color-svg); + mask-image: var(--logo-gcp-color-svg); } %with-logo-gcp-monochrome-icon { - @extend %with-icon; - background-image: $logo-gcp-monochrome-svg; + @extend %with-icon, %logo-gcp-monochrome-svg-prop; + background-image: var(--logo-gcp-monochrome-svg); } %with-logo-gcp-monochrome-mask { - @extend %with-mask; - -webkit-mask-image: $logo-gcp-monochrome-svg; - mask-image: $logo-gcp-monochrome-svg; + @extend %with-mask, %logo-gcp-monochrome-svg-prop; + -webkit-mask-image: var(--logo-gcp-monochrome-svg); + mask-image: var(--logo-gcp-monochrome-svg); } %with-logo-github-color-icon { - @extend %with-icon; - background-image: $logo-github-color-svg; + @extend %with-icon, %logo-github-color-svg-prop; + background-image: var(--logo-github-color-svg); } %with-logo-github-color-mask { - @extend %with-mask; - -webkit-mask-image: $logo-github-color-svg; - mask-image: $logo-github-color-svg; + @extend %with-mask, %logo-github-color-svg-prop; + -webkit-mask-image: var(--logo-github-color-svg); + mask-image: var(--logo-github-color-svg); } %with-logo-github-monochrome-icon { - @extend %with-icon; - background-image: $logo-github-monochrome-svg; + @extend %with-icon, %logo-github-monochrome-svg-prop; + background-image: var(--logo-github-monochrome-svg); } %with-logo-github-monochrome-mask { - @extend %with-mask; - -webkit-mask-image: $logo-github-monochrome-svg; - mask-image: $logo-github-monochrome-svg; + @extend %with-mask, %logo-github-monochrome-svg-prop; + -webkit-mask-image: var(--logo-github-monochrome-svg); + mask-image: var(--logo-github-monochrome-svg); } %with-logo-gitlab-color-icon { - @extend %with-icon; - background-image: $logo-gitlab-color-svg; + @extend %with-icon, %logo-gitlab-color-svg-prop; + background-image: var(--logo-gitlab-color-svg); } %with-logo-gitlab-color-mask { - @extend %with-mask; - -webkit-mask-image: $logo-gitlab-color-svg; - mask-image: $logo-gitlab-color-svg; + @extend %with-mask, %logo-gitlab-color-svg-prop; + -webkit-mask-image: var(--logo-gitlab-color-svg); + mask-image: var(--logo-gitlab-color-svg); } %with-logo-gitlab-monochrome-icon { - @extend %with-icon; - background-image: $logo-gitlab-monochrome-svg; + @extend %with-icon, %logo-gitlab-monochrome-svg-prop; + background-image: var(--logo-gitlab-monochrome-svg); } %with-logo-gitlab-monochrome-mask { - @extend %with-mask; - -webkit-mask-image: $logo-gitlab-monochrome-svg; - mask-image: $logo-gitlab-monochrome-svg; + @extend %with-mask, %logo-gitlab-monochrome-svg-prop; + -webkit-mask-image: var(--logo-gitlab-monochrome-svg); + mask-image: var(--logo-gitlab-monochrome-svg); } %with-logo-google-color-icon { - @extend %with-icon; - background-image: $logo-google-color-svg; + @extend %with-icon, %logo-google-color-svg-prop; + background-image: var(--logo-google-color-svg); } %with-logo-google-color-mask { - @extend %with-mask; - -webkit-mask-image: $logo-google-color-svg; - mask-image: $logo-google-color-svg; + @extend %with-mask, %logo-google-color-svg-prop; + -webkit-mask-image: var(--logo-google-color-svg); + mask-image: var(--logo-google-color-svg); } %with-logo-kubernetes-color-icon { - @extend %with-icon; - background-image: $logo-kubernetes-color-svg; + @extend %with-icon, %logo-kubernetes-color-svg-prop; + background-image: var(--logo-kubernetes-color-svg); } %with-logo-kubernetes-color-mask { - @extend %with-mask; - -webkit-mask-image: $logo-kubernetes-color-svg; - mask-image: $logo-kubernetes-color-svg; + @extend %with-mask, %logo-kubernetes-color-svg-prop; + -webkit-mask-image: var(--logo-kubernetes-color-svg); + mask-image: var(--logo-kubernetes-color-svg); } %with-logo-kubernetes-monochrome-icon { - @extend %with-icon; - background-image: $logo-kubernetes-monochrome-svg; + @extend %with-icon, %logo-kubernetes-monochrome-svg-prop; + background-image: var(--logo-kubernetes-monochrome-svg); } %with-logo-kubernetes-monochrome-mask { - @extend %with-mask; - -webkit-mask-image: $logo-kubernetes-monochrome-svg; - mask-image: $logo-kubernetes-monochrome-svg; + @extend %with-mask, %logo-kubernetes-monochrome-svg-prop; + -webkit-mask-image: var(--logo-kubernetes-monochrome-svg); + mask-image: var(--logo-kubernetes-monochrome-svg); } %with-logo-microsoft-color-icon { - @extend %with-icon; - background-image: $logo-microsoft-color-svg; + @extend %with-icon, %logo-microsoft-color-svg-prop; + background-image: var(--logo-microsoft-color-svg); } %with-logo-microsoft-color-mask { - @extend %with-mask; - -webkit-mask-image: $logo-microsoft-color-svg; - mask-image: $logo-microsoft-color-svg; + @extend %with-mask, %logo-microsoft-color-svg-prop; + -webkit-mask-image: var(--logo-microsoft-color-svg); + mask-image: var(--logo-microsoft-color-svg); } + %with-logo-nomad-color-icon { - @extend %with-icon; - background-image: $nomad-logo-color-svg; + @extend %with-icon, %logo-nomad-color-svg-prop; + background-image: var(--logo-nomad-color-svg); } %with-logo-nomad-color-mask { - @extend %with-mask; - -webkit-mask-image: $nomad-logo-color-svg; - mask-image: $nomad-logo-color-svg; + @extend %with-mask, %logo-nomad-color-svg-prop; + -webkit-mask-image: var(--logo-nomad-color-svg); + mask-image: var(--logo-nomad-color-svg); } %with-logo-okta-color-icon { - @extend %with-icon; - background-image: $logo-okta-color-svg; + @extend %with-icon, %logo-okta-color-svg-prop; + background-image: var(--logo-okta-color-svg); } %with-logo-okta-color-mask { - @extend %with-mask; - -webkit-mask-image: $logo-okta-color-svg; - mask-image: $logo-okta-color-svg; + @extend %with-mask, %logo-okta-color-svg-prop; + -webkit-mask-image: var(--logo-okta-color-svg); + mask-image: var(--logo-okta-color-svg); } %with-logo-oracle-color-icon { - @extend %with-icon; - background-image: $logo-oracle-color-svg; + @extend %with-icon, %logo-oracle-color-svg-prop; + background-image: var(--logo-oracle-color-svg); } %with-logo-oracle-color-mask { - @extend %with-mask; - -webkit-mask-image: $logo-oracle-color-svg; - mask-image: $logo-oracle-color-svg; + @extend %with-mask, %logo-oracle-color-svg-prop; + -webkit-mask-image: var(--logo-oracle-color-svg); + mask-image: var(--logo-oracle-color-svg); } %with-logo-oracle-monochrome-icon { - @extend %with-icon; - background-image: $logo-oracle-monochrome-svg; + @extend %with-icon, %logo-oracle-monochrome-svg-prop; + background-image: var(--logo-oracle-monochrome-svg); } %with-logo-oracle-monochrome-mask { - @extend %with-mask; - -webkit-mask-image: $logo-oracle-monochrome-svg; - mask-image: $logo-oracle-monochrome-svg; + @extend %with-mask, %logo-oracle-monochrome-svg-prop; + -webkit-mask-image: var(--logo-oracle-monochrome-svg); + mask-image: var(--logo-oracle-monochrome-svg); } %with-logo-slack-color-icon { - @extend %with-icon; - background-image: $logo-slack-color-svg; + @extend %with-icon, %logo-slack-color-svg-prop; + background-image: var(--logo-slack-color-svg); } %with-logo-slack-color-mask { - @extend %with-mask; - -webkit-mask-image: $logo-slack-color-svg; - mask-image: $logo-slack-color-svg; + @extend %with-mask, %logo-slack-color-svg-prop; + -webkit-mask-image: var(--logo-slack-color-svg); + mask-image: var(--logo-slack-color-svg); } %with-logo-slack-monochrome-icon { - @extend %with-icon; - background-image: $logo-slack-monochrome-svg; + @extend %with-icon, %logo-slack-monochrome-svg-prop; + background-image: var(--logo-slack-monochrome-svg); } %with-logo-slack-monochrome-mask { - @extend %with-mask; - -webkit-mask-image: $logo-slack-monochrome-svg; - mask-image: $logo-slack-monochrome-svg; + @extend %with-mask, %logo-slack-monochrome-svg-prop; + -webkit-mask-image: var(--logo-slack-monochrome-svg); + mask-image: var(--logo-slack-monochrome-svg); } %with-logo-terraform-color-icon { - @extend %with-icon; - background-image: $terraform-logo-color-svg; + @extend %with-icon, %logo-terraform-color-svg-prop; + background-image: var(--logo-terraform-color-svg); } %with-logo-terraform-color-mask { - @extend %with-mask; - -webkit-mask-image: $terraform-logo-color-svg; - mask-image: $terraform-logo-color-svg; + @extend %with-mask, %logo-terraform-color-svg-prop; + -webkit-mask-image: var(--logo-terraform-color-svg); + mask-image: var(--logo-terraform-color-svg); } + %with-logo-vmware-color-icon { - @extend %with-icon; - background-image: $logo-vmware-color-svg; + @extend %with-icon, %logo-vmware-color-svg-prop; + background-image: var(--logo-vmware-color-svg); } %with-logo-vmware-color-mask { - @extend %with-mask; - -webkit-mask-image: $logo-vmware-color-svg; - mask-image: $logo-vmware-color-svg; + @extend %with-mask, %logo-vmware-color-svg-prop; + -webkit-mask-image: var(--logo-vmware-color-svg); + mask-image: var(--logo-vmware-color-svg); } %with-logo-vmware-monochrome-icon { - @extend %with-icon; - background-image: $logo-vmware-monochrome-svg; + @extend %with-icon, %logo-vmware-monochrome-svg-prop; + background-image: var(--logo-vmware-monochrome-svg); } %with-logo-vmware-monochrome-mask { - @extend %with-mask; - -webkit-mask-image: $logo-vmware-monochrome-svg; - mask-image: $logo-vmware-monochrome-svg; + @extend %with-mask, %logo-vmware-monochrome-svg-prop; + -webkit-mask-image: var(--logo-vmware-monochrome-svg); + mask-image: var(--logo-vmware-monochrome-svg); } %with-menu-icon { - @extend %with-icon; - background-image: $menu-svg; + @extend %with-icon, %menu-svg-prop; + background-image: var(--menu-svg); } %with-menu-mask { - @extend %with-mask; - -webkit-mask-image: $menu-svg; - mask-image: $menu-svg; + @extend %with-mask, %menu-svg-prop; + -webkit-mask-image: var(--menu-svg); + mask-image: var(--menu-svg); } %with-mesh-icon { - @extend %with-icon; - background-image: $mesh-svg; + @extend %with-icon, %mesh-svg-prop; + background-image: var(--mesh-svg); } %with-mesh-mask { - @extend %with-mask; - -webkit-mask-image: $mesh-svg; - mask-image: $mesh-svg; + @extend %with-mask, %mesh-svg-prop; + -webkit-mask-image: var(--mesh-svg); + mask-image: var(--mesh-svg); } %with-message-icon { - @extend %with-icon; - background-image: $message-svg; + @extend %with-icon, %message-svg-prop; + background-image: var(--message-svg); } %with-message-mask { - @extend %with-mask; - -webkit-mask-image: $message-svg; - mask-image: $message-svg; + @extend %with-mask, %message-svg-prop; + -webkit-mask-image: var(--message-svg); + mask-image: var(--message-svg); } %with-minus-circle-fill-icon { - @extend %with-icon; - background-image: $minus-circle-fill-svg; + @extend %with-icon, %minus-circle-fill-svg-prop; + background-image: var(--minus-circle-fill-svg); } %with-minus-circle-fill-mask { - @extend %with-mask; - -webkit-mask-image: $minus-circle-fill-svg; - mask-image: $minus-circle-fill-svg; + @extend %with-mask, %minus-circle-fill-svg-prop; + -webkit-mask-image: var(--minus-circle-fill-svg); + mask-image: var(--minus-circle-fill-svg); } %with-minus-circle-outline-icon { - @extend %with-icon; - background-image: $minus-circle-outline-svg; + @extend %with-icon, %minus-circle-outline-svg-prop; + background-image: var(--minus-circle-outline-svg); } %with-minus-circle-outline-mask { - @extend %with-mask; - -webkit-mask-image: $minus-circle-outline-svg; - mask-image: $minus-circle-outline-svg; + @extend %with-mask, %minus-circle-outline-svg-prop; + -webkit-mask-image: var(--minus-circle-outline-svg); + mask-image: var(--minus-circle-outline-svg); } %with-minus-plain-icon { - @extend %with-icon; - background-image: $minus-plain-svg; + @extend %with-icon, %minus-plain-svg-prop; + background-image: var(--minus-plain-svg); } %with-minus-plain-mask { - @extend %with-mask; - -webkit-mask-image: $minus-plain-svg; - mask-image: $minus-plain-svg; + @extend %with-mask, %minus-plain-svg-prop; + -webkit-mask-image: var(--minus-plain-svg); + mask-image: var(--minus-plain-svg); } %with-minus-square-fill-color-icon { - @extend %with-icon; - background-image: $minus-square-fill-color-svg; + @extend %with-icon, %minus-square-fill-color-svg-prop; + background-image: var(--minus-square-fill-color-svg); } %with-minus-square-fill-color-mask { - @extend %with-mask; - -webkit-mask-image: $minus-square-fill-color-svg; - mask-image: $minus-square-fill-color-svg; + @extend %with-mask, %minus-square-fill-color-svg-prop; + -webkit-mask-image: var(--minus-square-fill-color-svg); + mask-image: var(--minus-square-fill-color-svg); } %with-minus-square-fill-icon { - @extend %with-icon; - background-image: $minus-square-fill-svg; + @extend %with-icon, %minus-square-fill-svg-prop; + background-image: var(--minus-square-fill-svg); } %with-minus-square-fill-mask { - @extend %with-mask; - -webkit-mask-image: $minus-square-fill-svg; - mask-image: $minus-square-fill-svg; + @extend %with-mask, %minus-square-fill-svg-prop; + -webkit-mask-image: var(--minus-square-fill-svg); + mask-image: var(--minus-square-fill-svg); } %with-minus-icon { - @extend %with-icon; - background-image: $minus-svg; + @extend %with-icon, %minus-svg-prop; + background-image: var(--minus-svg); } %with-minus-mask { - @extend %with-mask; - -webkit-mask-image: $minus-svg; - mask-image: $minus-svg; + @extend %with-mask, %minus-svg-prop; + -webkit-mask-image: var(--minus-svg); + mask-image: var(--minus-svg); } %with-module-icon { - @extend %with-icon; - background-image: $module-svg; + @extend %with-icon, %module-svg-prop; + background-image: var(--module-svg); } %with-module-mask { - @extend %with-mask; - -webkit-mask-image: $module-svg; - mask-image: $module-svg; + @extend %with-mask, %module-svg-prop; + -webkit-mask-image: var(--module-svg); + mask-image: var(--module-svg); } %with-more-horizontal-icon { - @extend %with-icon; - background-image: $more-horizontal-svg; + @extend %with-icon, %more-horizontal-svg-prop; + background-image: var(--more-horizontal-svg); } %with-more-horizontal-mask { - @extend %with-mask; - -webkit-mask-image: $more-horizontal-svg; - mask-image: $more-horizontal-svg; + @extend %with-mask, %more-horizontal-svg-prop; + -webkit-mask-image: var(--more-horizontal-svg); + mask-image: var(--more-horizontal-svg); } %with-more-vertical-icon { - @extend %with-icon; - background-image: $more-vertical-svg; + @extend %with-icon, %more-vertical-svg-prop; + background-image: var(--more-vertical-svg); } %with-more-vertical-mask { - @extend %with-mask; - -webkit-mask-image: $more-vertical-svg; - mask-image: $more-vertical-svg; + @extend %with-mask, %more-vertical-svg-prop; + -webkit-mask-image: var(--more-vertical-svg); + mask-image: var(--more-vertical-svg); } %with-nomad-logo-color-icon { - @extend %with-icon; - background-image: $nomad-logo-color-svg; + @extend %with-icon, %nomad-logo-color-svg-prop; + background-image: var(--nomad-logo-color-svg); } %with-nomad-logo-color-mask { - @extend %with-mask; - -webkit-mask-image: $nomad-logo-color-svg; - mask-image: $nomad-logo-color-svg; + @extend %with-mask, %nomad-logo-color-svg-prop; + -webkit-mask-image: var(--nomad-logo-color-svg); + mask-image: var(--nomad-logo-color-svg); } %with-notification-disabled-icon { - @extend %with-icon; - background-image: $notification-disabled-svg; + @extend %with-icon, %notification-disabled-svg-prop; + background-image: var(--notification-disabled-svg); } %with-notification-disabled-mask { - @extend %with-mask; - -webkit-mask-image: $notification-disabled-svg; - mask-image: $notification-disabled-svg; + @extend %with-mask, %notification-disabled-svg-prop; + -webkit-mask-image: var(--notification-disabled-svg); + mask-image: var(--notification-disabled-svg); } %with-notification-fill-icon { - @extend %with-icon; - background-image: $notification-fill-svg; + @extend %with-icon, %notification-fill-svg-prop; + background-image: var(--notification-fill-svg); } %with-notification-fill-mask { - @extend %with-mask; - -webkit-mask-image: $notification-fill-svg; - mask-image: $notification-fill-svg; + @extend %with-mask, %notification-fill-svg-prop; + -webkit-mask-image: var(--notification-fill-svg); + mask-image: var(--notification-fill-svg); } %with-notification-outline-icon { - @extend %with-icon; - background-image: $notification-outline-svg; + @extend %with-icon, %notification-outline-svg-prop; + background-image: var(--notification-outline-svg); } %with-notification-outline-mask { - @extend %with-mask; - -webkit-mask-image: $notification-outline-svg; - mask-image: $notification-outline-svg; + @extend %with-mask, %notification-outline-svg-prop; + -webkit-mask-image: var(--notification-outline-svg); + mask-image: var(--notification-outline-svg); } %with-oidc-logo-icon { - @extend %with-icon; - background-image: $oidc-logo-svg; + @extend %with-icon, %oidc-logo-svg-prop; + background-image: var(--oidc-logo-svg); } %with-oidc-logo-mask { - @extend %with-mask; - -webkit-mask-image: $oidc-logo-svg; - mask-image: $oidc-logo-svg; + @extend %with-mask, %oidc-logo-svg-prop; + -webkit-mask-image: var(--oidc-logo-svg); + mask-image: var(--oidc-logo-svg); } %with-outline-icon { - @extend %with-icon; - background-image: $outline-svg; + @extend %with-icon, %outline-svg-prop; + background-image: var(--outline-svg); } %with-outline-mask { - @extend %with-mask; - -webkit-mask-image: $outline-svg; - mask-image: $outline-svg; + @extend %with-mask, %outline-svg-prop; + -webkit-mask-image: var(--outline-svg); + mask-image: var(--outline-svg); } %with-page-outline-icon { - @extend %with-icon; - background-image: $page-outline-svg; + @extend %with-icon, %page-outline-svg-prop; + background-image: var(--page-outline-svg); } %with-page-outline-mask { - @extend %with-mask; - -webkit-mask-image: $page-outline-svg; - mask-image: $page-outline-svg; + @extend %with-mask, %page-outline-svg-prop; + -webkit-mask-image: var(--page-outline-svg); + mask-image: var(--page-outline-svg); } %with-partner-icon { - @extend %with-icon; - background-image: $partner-svg; + @extend %with-icon, %partner-svg-prop; + background-image: var(--partner-svg); } %with-partner-mask { - @extend %with-mask; - -webkit-mask-image: $partner-svg; - mask-image: $partner-svg; + @extend %with-mask, %partner-svg-prop; + -webkit-mask-image: var(--partner-svg); + mask-image: var(--partner-svg); } %with-path-icon { - @extend %with-icon; - background-image: $path-svg; + @extend %with-icon, %path-svg-prop; + background-image: var(--path-svg); } %with-path-mask { - @extend %with-mask; - -webkit-mask-image: $path-svg; - mask-image: $path-svg; + @extend %with-mask, %path-svg-prop; + -webkit-mask-image: var(--path-svg); + mask-image: var(--path-svg); } %with-plus-circle-fill-icon { - @extend %with-icon; - background-image: $plus-circle-fill-svg; + @extend %with-icon, %plus-circle-fill-svg-prop; + background-image: var(--plus-circle-fill-svg); } %with-plus-circle-fill-mask { - @extend %with-mask; - -webkit-mask-image: $plus-circle-fill-svg; - mask-image: $plus-circle-fill-svg; + @extend %with-mask, %plus-circle-fill-svg-prop; + -webkit-mask-image: var(--plus-circle-fill-svg); + mask-image: var(--plus-circle-fill-svg); } %with-plus-circle-outline-icon { - @extend %with-icon; - background-image: $plus-circle-outline-svg; + @extend %with-icon, %plus-circle-outline-svg-prop; + background-image: var(--plus-circle-outline-svg); } %with-plus-circle-outline-mask { - @extend %with-mask; - -webkit-mask-image: $plus-circle-outline-svg; - mask-image: $plus-circle-outline-svg; + @extend %with-mask, %plus-circle-outline-svg-prop; + -webkit-mask-image: var(--plus-circle-outline-svg); + mask-image: var(--plus-circle-outline-svg); } %with-plus-plain-icon { - @extend %with-icon; - background-image: $plus-plain-svg; + @extend %with-icon, %plus-plain-svg-prop; + background-image: var(--plus-plain-svg); } %with-plus-plain-mask { - @extend %with-mask; - -webkit-mask-image: $plus-plain-svg; - mask-image: $plus-plain-svg; + @extend %with-mask, %plus-plain-svg-prop; + -webkit-mask-image: var(--plus-plain-svg); + mask-image: var(--plus-plain-svg); } %with-plus-square-fill-icon { - @extend %with-icon; - background-image: $plus-square-fill-svg; + @extend %with-icon, %plus-square-fill-svg-prop; + background-image: var(--plus-square-fill-svg); } %with-plus-square-fill-mask { - @extend %with-mask; - -webkit-mask-image: $plus-square-fill-svg; - mask-image: $plus-square-fill-svg; + @extend %with-mask, %plus-square-fill-svg-prop; + -webkit-mask-image: var(--plus-square-fill-svg); + mask-image: var(--plus-square-fill-svg); } %with-port-icon { - @extend %with-icon; - background-image: $port-svg; + @extend %with-icon, %port-svg-prop; + background-image: var(--port-svg); } %with-port-mask { - @extend %with-mask; - -webkit-mask-image: $port-svg; - mask-image: $port-svg; + @extend %with-mask, %port-svg-prop; + -webkit-mask-image: var(--port-svg); + mask-image: var(--port-svg); } %with-protocol-icon { - @extend %with-icon; - background-image: $protocol-svg; + @extend %with-icon, %protocol-svg-prop; + background-image: var(--protocol-svg); } %with-protocol-mask { - @extend %with-mask; - -webkit-mask-image: $protocol-svg; - mask-image: $protocol-svg; + @extend %with-mask, %protocol-svg-prop; + -webkit-mask-image: var(--protocol-svg); + mask-image: var(--protocol-svg); } %with-provider-icon { - @extend %with-icon; - background-image: $provider-svg; + @extend %with-icon, %provider-svg-prop; + background-image: var(--provider-svg); } %with-provider-mask { - @extend %with-mask; - -webkit-mask-image: $provider-svg; - mask-image: $provider-svg; + @extend %with-mask, %provider-svg-prop; + -webkit-mask-image: var(--provider-svg); + mask-image: var(--provider-svg); } %with-public-default-icon { - @extend %with-icon; - background-image: $public-default-svg; + @extend %with-icon, %public-default-svg-prop; + background-image: var(--public-default-svg); } %with-public-default-mask { - @extend %with-mask; - -webkit-mask-image: $public-default-svg; - mask-image: $public-default-svg; + @extend %with-mask, %public-default-svg-prop; + -webkit-mask-image: var(--public-default-svg); + mask-image: var(--public-default-svg); } %with-public-locked-icon { - @extend %with-icon; - background-image: $public-locked-svg; + @extend %with-icon, %public-locked-svg-prop; + background-image: var(--public-locked-svg); } %with-public-locked-mask { - @extend %with-mask; - -webkit-mask-image: $public-locked-svg; - mask-image: $public-locked-svg; + @extend %with-mask, %public-locked-svg-prop; + -webkit-mask-image: var(--public-locked-svg); + mask-image: var(--public-locked-svg); } %with-queue-icon { - @extend %with-icon; - background-image: $queue-svg; + @extend %with-icon, %queue-svg-prop; + background-image: var(--queue-svg); } %with-queue-mask { - @extend %with-mask; - -webkit-mask-image: $queue-svg; - mask-image: $queue-svg; + @extend %with-mask, %queue-svg-prop; + -webkit-mask-image: var(--queue-svg); + mask-image: var(--queue-svg); } %with-radio-button-checked-icon { - @extend %with-icon; - background-image: $radio-button-checked-svg; + @extend %with-icon, %radio-button-checked-svg-prop; + background-image: var(--radio-button-checked-svg); } %with-radio-button-checked-mask { - @extend %with-mask; - -webkit-mask-image: $radio-button-checked-svg; - mask-image: $radio-button-checked-svg; + @extend %with-mask, %radio-button-checked-svg-prop; + -webkit-mask-image: var(--radio-button-checked-svg); + mask-image: var(--radio-button-checked-svg); } %with-radio-button-unchecked-icon { - @extend %with-icon; - background-image: $radio-button-unchecked-svg; + @extend %with-icon, %radio-button-unchecked-svg-prop; + background-image: var(--radio-button-unchecked-svg); } %with-radio-button-unchecked-mask { - @extend %with-mask; - -webkit-mask-image: $radio-button-unchecked-svg; - mask-image: $radio-button-unchecked-svg; + @extend %with-mask, %radio-button-unchecked-svg-prop; + -webkit-mask-image: var(--radio-button-unchecked-svg); + mask-image: var(--radio-button-unchecked-svg); } %with-random-icon { - @extend %with-icon; - background-image: $random-svg; + @extend %with-icon, %random-svg-prop; + background-image: var(--random-svg); } %with-random-mask { - @extend %with-mask; - -webkit-mask-image: $random-svg; - mask-image: $random-svg; + @extend %with-mask, %random-svg-prop; + -webkit-mask-image: var(--random-svg); + mask-image: var(--random-svg); } %with-redirect-icon { - @extend %with-icon; - background-image: $redirect-svg; + @extend %with-icon, %redirect-svg-prop; + background-image: var(--redirect-svg); } %with-redirect-mask { - @extend %with-mask; - -webkit-mask-image: $redirect-svg; - mask-image: $redirect-svg; + @extend %with-mask, %redirect-svg-prop; + -webkit-mask-image: var(--redirect-svg); + mask-image: var(--redirect-svg); } %with-refresh-alert-icon { - @extend %with-icon; - background-image: $refresh-alert-svg; + @extend %with-icon, %refresh-alert-svg-prop; + background-image: var(--refresh-alert-svg); } %with-refresh-alert-mask { - @extend %with-mask; - -webkit-mask-image: $refresh-alert-svg; - mask-image: $refresh-alert-svg; + @extend %with-mask, %refresh-alert-svg-prop; + -webkit-mask-image: var(--refresh-alert-svg); + mask-image: var(--refresh-alert-svg); } %with-refresh-default-icon { - @extend %with-icon; - background-image: $refresh-default-svg; + @extend %with-icon, %refresh-default-svg-prop; + background-image: var(--refresh-default-svg); } %with-refresh-default-mask { - @extend %with-mask; - -webkit-mask-image: $refresh-default-svg; - mask-image: $refresh-default-svg; + @extend %with-mask, %refresh-default-svg-prop; + -webkit-mask-image: var(--refresh-default-svg); + mask-image: var(--refresh-default-svg); } %with-remix-icon { - @extend %with-icon; - background-image: $remix-svg; + @extend %with-icon, %remix-svg-prop; + background-image: var(--remix-svg); } %with-remix-mask { - @extend %with-mask; - -webkit-mask-image: $remix-svg; - mask-image: $remix-svg; + @extend %with-mask, %remix-svg-prop; + -webkit-mask-image: var(--remix-svg); + mask-image: var(--remix-svg); } %with-ribbon-icon { - @extend %with-icon; - background-image: $ribbon-svg; + @extend %with-icon, %ribbon-svg-prop; + background-image: var(--ribbon-svg); } %with-ribbon-mask { - @extend %with-mask; - -webkit-mask-image: $ribbon-svg; - mask-image: $ribbon-svg; + @extend %with-mask, %ribbon-svg-prop; + -webkit-mask-image: var(--ribbon-svg); + mask-image: var(--ribbon-svg); } %with-run-icon { - @extend %with-icon; - background-image: $run-svg; + @extend %with-icon, %run-svg-prop; + background-image: var(--run-svg); } %with-run-mask { - @extend %with-mask; - -webkit-mask-image: $run-svg; - mask-image: $run-svg; + @extend %with-mask, %run-svg-prop; + -webkit-mask-image: var(--run-svg); + mask-image: var(--run-svg); } %with-search-color-icon { - @extend %with-icon; - background-image: $search-color-svg; + @extend %with-icon, %search-color-svg-prop; + background-image: var(--search-color-svg); } %with-search-color-mask { - @extend %with-mask; - -webkit-mask-image: $search-color-svg; - mask-image: $search-color-svg; + @extend %with-mask, %search-color-svg-prop; + -webkit-mask-image: var(--search-color-svg); + mask-image: var(--search-color-svg); } %with-search-icon { - @extend %with-icon; - background-image: $search-svg; + @extend %with-icon, %search-svg-prop; + background-image: var(--search-svg); } %with-search-mask { - @extend %with-mask; - -webkit-mask-image: $search-svg; - mask-image: $search-svg; + @extend %with-mask, %search-svg-prop; + -webkit-mask-image: var(--search-svg); + mask-image: var(--search-svg); } %with-service-identity-icon { - @extend %with-icon; - background-image: $service-identity-svg; + @extend %with-icon, %service-identity-svg-prop; + background-image: var(--service-identity-svg); } %with-service-identity-mask { - @extend %with-mask; - -webkit-mask-image: $service-identity-svg; - mask-image: $service-identity-svg; + @extend %with-mask, %service-identity-svg-prop; + -webkit-mask-image: var(--service-identity-svg); + mask-image: var(--service-identity-svg); } %with-settings-icon { - @extend %with-icon; - background-image: $settings-svg; + @extend %with-icon, %settings-svg-prop; + background-image: var(--settings-svg); } %with-settings-mask { - @extend %with-mask; - -webkit-mask-image: $settings-svg; - mask-image: $settings-svg; -} - -%with-source-file-icon { - @extend %with-icon; - background-image: $source-file-svg; -} -%with-source-file-mask { - @extend %with-mask; - -webkit-mask-image: $source-file-svg; - mask-image: $source-file-svg; + @extend %with-mask, %settings-svg-prop; + -webkit-mask-image: var(--settings-svg); + mask-image: var(--settings-svg); } %with-sort-icon { - @extend %with-icon; - background-image: $sort-svg; + @extend %with-icon, %sort-svg-prop; + background-image: var(--sort-svg); } %with-sort-mask { - @extend %with-mask; - -webkit-mask-image: $sort-svg; - mask-image: $sort-svg; + @extend %with-mask, %sort-svg-prop; + -webkit-mask-image: var(--sort-svg); + mask-image: var(--sort-svg); +} + +%with-source-file-icon { + @extend %with-icon, %source-file-svg-prop; + background-image: var(--source-file-svg); +} +%with-source-file-mask { + @extend %with-mask, %source-file-svg-prop; + -webkit-mask-image: var(--source-file-svg); + mask-image: var(--source-file-svg); } %with-star-fill-icon { - @extend %with-icon; - background-image: $star-fill-svg; + @extend %with-icon, %star-fill-svg-prop; + background-image: var(--star-fill-svg); } %with-star-fill-mask { - @extend %with-mask; - -webkit-mask-image: $star-fill-svg; - mask-image: $star-fill-svg; + @extend %with-mask, %star-fill-svg-prop; + -webkit-mask-image: var(--star-fill-svg); + mask-image: var(--star-fill-svg); } %with-star-outline-icon { - @extend %with-icon; - background-image: $star-outline-svg; + @extend %with-icon, %star-outline-svg-prop; + background-image: var(--star-outline-svg); } %with-star-outline-mask { - @extend %with-mask; - -webkit-mask-image: $star-outline-svg; - mask-image: $star-outline-svg; + @extend %with-mask, %star-outline-svg-prop; + -webkit-mask-image: var(--star-outline-svg); + mask-image: var(--star-outline-svg); } %with-star-icon { - @extend %with-icon; - background-image: $star-svg; + @extend %with-icon, %star-svg-prop; + background-image: var(--star-svg); } %with-star-mask { - @extend %with-mask; - -webkit-mask-image: $star-svg; - mask-image: $star-svg; + @extend %with-mask, %star-svg-prop; + -webkit-mask-image: var(--star-svg); + mask-image: var(--star-svg); } %with-sub-left-icon { - @extend %with-icon; - background-image: $sub-left-svg; + @extend %with-icon, %sub-left-svg-prop; + background-image: var(--sub-left-svg); } %with-sub-left-mask { - @extend %with-mask; - -webkit-mask-image: $sub-left-svg; - mask-image: $sub-left-svg; + @extend %with-mask, %sub-left-svg-prop; + -webkit-mask-image: var(--sub-left-svg); + mask-image: var(--sub-left-svg); } %with-sub-right-icon { - @extend %with-icon; - background-image: $sub-right-svg; + @extend %with-icon, %sub-right-svg-prop; + background-image: var(--sub-right-svg); } %with-sub-right-mask { - @extend %with-mask; - -webkit-mask-image: $sub-right-svg; - mask-image: $sub-right-svg; + @extend %with-mask, %sub-right-svg-prop; + -webkit-mask-image: var(--sub-right-svg); + mask-image: var(--sub-right-svg); } %with-support-icon { - @extend %with-icon; - background-image: $support-svg; + @extend %with-icon, %support-svg-prop; + background-image: var(--support-svg); } %with-support-mask { - @extend %with-mask; - -webkit-mask-image: $support-svg; - mask-image: $support-svg; + @extend %with-mask, %support-svg-prop; + -webkit-mask-image: var(--support-svg); + mask-image: var(--support-svg); } %with-swap-horizontal-icon { - @extend %with-icon; - background-image: $swap-horizontal-svg; + @extend %with-icon, %swap-horizontal-svg-prop; + background-image: var(--swap-horizontal-svg); } %with-swap-horizontal-mask { - @extend %with-mask; - -webkit-mask-image: $swap-horizontal-svg; - mask-image: $swap-horizontal-svg; + @extend %with-mask, %swap-horizontal-svg-prop; + -webkit-mask-image: var(--swap-horizontal-svg); + mask-image: var(--swap-horizontal-svg); } %with-swap-vertical-icon { - @extend %with-icon; - background-image: $swap-vertical-svg; + @extend %with-icon, %swap-vertical-svg-prop; + background-image: var(--swap-vertical-svg); } %with-swap-vertical-mask { - @extend %with-mask; - -webkit-mask-image: $swap-vertical-svg; - mask-image: $swap-vertical-svg; + @extend %with-mask, %swap-vertical-svg-prop; + -webkit-mask-image: var(--swap-vertical-svg); + mask-image: var(--swap-vertical-svg); } %with-tag-icon { - @extend %with-icon; - background-image: $tag-svg; + @extend %with-icon, %tag-svg-prop; + background-image: var(--tag-svg); } %with-tag-mask { - @extend %with-mask; - -webkit-mask-image: $tag-svg; - mask-image: $tag-svg; + @extend %with-mask, %tag-svg-prop; + -webkit-mask-image: var(--tag-svg); + mask-image: var(--tag-svg); } %with-terraform-logo-color-icon { - @extend %with-icon; - background-image: $terraform-logo-color-svg; + @extend %with-icon, %terraform-logo-color-svg-prop; + background-image: var(--terraform-logo-color-svg); } %with-terraform-logo-color-mask { - @extend %with-mask; - -webkit-mask-image: $terraform-logo-color-svg; - mask-image: $terraform-logo-color-svg; + @extend %with-mask, %terraform-logo-color-svg-prop; + -webkit-mask-image: var(--terraform-logo-color-svg); + mask-image: var(--terraform-logo-color-svg); } %with-trash-icon { - @extend %with-icon; - background-image: $trash-svg; + @extend %with-icon, %trash-svg-prop; + background-image: var(--trash-svg); } %with-trash-mask { - @extend %with-mask; - -webkit-mask-image: $trash-svg; - mask-image: $trash-svg; + @extend %with-mask, %trash-svg-prop; + -webkit-mask-image: var(--trash-svg); + mask-image: var(--trash-svg); } %with-tune-icon { - @extend %with-icon; - background-image: $tune-svg; + @extend %with-icon, %tune-svg-prop; + background-image: var(--tune-svg); } %with-tune-mask { - @extend %with-mask; - -webkit-mask-image: $tune-svg; - mask-image: $tune-svg; + @extend %with-mask, %tune-svg-prop; + -webkit-mask-image: var(--tune-svg); + mask-image: var(--tune-svg); } %with-unfold-less-icon { - @extend %with-icon; - background-image: $unfold-less-svg; + @extend %with-icon, %unfold-less-svg-prop; + background-image: var(--unfold-less-svg); } %with-unfold-less-mask { - @extend %with-mask; - -webkit-mask-image: $unfold-less-svg; - mask-image: $unfold-less-svg; + @extend %with-mask, %unfold-less-svg-prop; + -webkit-mask-image: var(--unfold-less-svg); + mask-image: var(--unfold-less-svg); } %with-unfold-more-icon { - @extend %with-icon; - background-image: $unfold-more-svg; + @extend %with-icon, %unfold-more-svg-prop; + background-image: var(--unfold-more-svg); } %with-unfold-more-mask { - @extend %with-mask; - -webkit-mask-image: $unfold-more-svg; - mask-image: $unfold-more-svg; + @extend %with-mask, %unfold-more-svg-prop; + -webkit-mask-image: var(--unfold-more-svg); + mask-image: var(--unfold-more-svg); } %with-upload-icon { - @extend %with-icon; - background-image: $upload-svg; + @extend %with-icon, %upload-svg-prop; + background-image: var(--upload-svg); } %with-upload-mask { - @extend %with-mask; - -webkit-mask-image: $upload-svg; - mask-image: $upload-svg; + @extend %with-mask, %upload-svg-prop; + -webkit-mask-image: var(--upload-svg); + mask-image: var(--upload-svg); } %with-user-add-icon { - @extend %with-icon; - background-image: $user-add-svg; + @extend %with-icon, %user-add-svg-prop; + background-image: var(--user-add-svg); } %with-user-add-mask { - @extend %with-mask; - -webkit-mask-image: $user-add-svg; - mask-image: $user-add-svg; + @extend %with-mask, %user-add-svg-prop; + -webkit-mask-image: var(--user-add-svg); + mask-image: var(--user-add-svg); } %with-user-organization-icon { - @extend %with-icon; - background-image: $user-organization-svg; + @extend %with-icon, %user-organization-svg-prop; + background-image: var(--user-organization-svg); } %with-user-organization-mask { - @extend %with-mask; - -webkit-mask-image: $user-organization-svg; - mask-image: $user-organization-svg; + @extend %with-mask, %user-organization-svg-prop; + -webkit-mask-image: var(--user-organization-svg); + mask-image: var(--user-organization-svg); } %with-user-plain-icon { - @extend %with-icon; - background-image: $user-plain-svg; + @extend %with-icon, %user-plain-svg-prop; + background-image: var(--user-plain-svg); } %with-user-plain-mask { - @extend %with-mask; - -webkit-mask-image: $user-plain-svg; - mask-image: $user-plain-svg; + @extend %with-mask, %user-plain-svg-prop; + -webkit-mask-image: var(--user-plain-svg); + mask-image: var(--user-plain-svg); } %with-user-square-fill-icon { - @extend %with-icon; - background-image: $user-square-fill-svg; + @extend %with-icon, %user-square-fill-svg-prop; + background-image: var(--user-square-fill-svg); } %with-user-square-fill-mask { - @extend %with-mask; - -webkit-mask-image: $user-square-fill-svg; - mask-image: $user-square-fill-svg; + @extend %with-mask, %user-square-fill-svg-prop; + -webkit-mask-image: var(--user-square-fill-svg); + mask-image: var(--user-square-fill-svg); } %with-user-square-outline-icon { - @extend %with-icon; - background-image: $user-square-outline-svg; + @extend %with-icon, %user-square-outline-svg-prop; + background-image: var(--user-square-outline-svg); } %with-user-square-outline-mask { - @extend %with-mask; - -webkit-mask-image: $user-square-outline-svg; - mask-image: $user-square-outline-svg; + @extend %with-mask, %user-square-outline-svg-prop; + -webkit-mask-image: var(--user-square-outline-svg); + mask-image: var(--user-square-outline-svg); } %with-user-team-icon { - @extend %with-icon; - background-image: $user-team-svg; + @extend %with-icon, %user-team-svg-prop; + background-image: var(--user-team-svg); } %with-user-team-mask { - @extend %with-mask; - -webkit-mask-image: $user-team-svg; - mask-image: $user-team-svg; + @extend %with-mask, %user-team-svg-prop; + -webkit-mask-image: var(--user-team-svg); + mask-image: var(--user-team-svg); } %with-visibility-hide-icon { - @extend %with-icon; - background-image: $visibility-hide-svg; + @extend %with-icon, %visibility-hide-svg-prop; + background-image: var(--visibility-hide-svg); } %with-visibility-hide-mask { - @extend %with-mask; - -webkit-mask-image: $visibility-hide-svg; - mask-image: $visibility-hide-svg; + @extend %with-mask, %visibility-hide-svg-prop; + -webkit-mask-image: var(--visibility-hide-svg); + mask-image: var(--visibility-hide-svg); } %with-visibility-show-icon { - @extend %with-icon; - background-image: $visibility-show-svg; + @extend %with-icon, %visibility-show-svg-prop; + background-image: var(--visibility-show-svg); } %with-visibility-show-mask { - @extend %with-mask; - -webkit-mask-image: $visibility-show-svg; - mask-image: $visibility-show-svg; + @extend %with-mask, %visibility-show-svg-prop; + -webkit-mask-image: var(--visibility-show-svg); + mask-image: var(--visibility-show-svg); } %with-webhook-icon { - @extend %with-icon; - background-image: $webhook-svg; + @extend %with-icon, %webhook-svg-prop; + background-image: var(--webhook-svg); } %with-webhook-mask { - @extend %with-mask; - -webkit-mask-image: $webhook-svg; - mask-image: $webhook-svg; + @extend %with-mask, %webhook-svg-prop; + -webkit-mask-image: var(--webhook-svg); + mask-image: var(--webhook-svg); } %without-mask { -webkit-mask-image: none; mask-image: none; - background-color: $transparent !important; + background-color: var(--transparent) !important; } diff --git a/ui/packages/consul-ui/app/styles/components/progress/skin.scss b/ui/packages/consul-ui/app/styles/components/progress/skin.scss index 2d8dd6c52..cc040da50 100644 --- a/ui/packages/consul-ui/app/styles/components/progress/skin.scss +++ b/ui/packages/consul-ui/app/styles/components/progress/skin.scss @@ -1,5 +1,6 @@ %progress-indeterminate { - background-image: $loading-svg; + @extend %loading-svg-prop; + background-image: var(--loading-svg); background-position: center; background-repeat: no-repeat; background-color: transparent;