npm - @ebay/skin - Versions diffs - 17.5.0 → 18.0.0-next.0 - Mend

@ebay/skin 17.5.0 → 18.0.0-next.0

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

Files changed (475) hide show

package/src/sass/mixins/private/_generated-icon-mixins.scss ADDED Viewed

@@ -0,0 +1,517 @@
+/* This is a generated file, DO NOT EDIT */
+$program-badge-authenticity-guaranteed-width: 48px;
+$program-badge-authenticity-guaranteed-height: 48px;
+$program-badge-click-to-call-width: 48px;
+$program-badge-click-to-call-height: 48px;
+$program-badge-escrow-width: 48px;
+$program-badge-escrow-height: 48px;
+$program-badge-free-warranty-width: 48px;
+$program-badge-free-warranty-height: 48px;
+$program-badge-money-back-guarantee-chf-width: 48px;
+$program-badge-money-back-guarantee-chf-height: 48px;
+$program-badge-money-back-guarantee-eu-width: 48px;
+$program-badge-money-back-guarantee-eu-height: 48px;
+$program-badge-money-back-guarantee-uk-width: 48px;
+$program-badge-money-back-guarantee-uk-height: 48px;
+$program-badge-money-back-guarantee-us-width: 48px;
+$program-badge-money-back-guarantee-us-height: 50px;
+$program-badge-money-back-guarantee-zl-width: 48px;
+$program-badge-money-back-guarantee-zl-height: 48px;
+$program-badge-top-rated-seller-width: 48px;
+$program-badge-top-rated-seller-height: 48px;
+$program-badge-ebay-plus-width: 58px;
+$program-badge-ebay-plus-height: 16px;
+$program-badge-vault-width: 48px;
+$program-badge-vault-height: 48px;
+$icon-add-width: 20px;
+$icon-add-height: 20px;
+$icon-add-small-width: 14px;
+$icon-add-small-height: 14px;
+$icon-arrow-left-width: 20px;
+$icon-arrow-left-height: 18px;
+$icon-arrow-left-small-width: 14px;
+$icon-arrow-left-small-height: 14px;
+$icon-arrow-move-width: 15px;
+$icon-arrow-move-height: 15px;
+$icon-arrow-move-small-width: 11px;
+$icon-arrow-move-small-height: 11px;
+$icon-arrow-right-width: 20px;
+$icon-arrow-right-height: 18px;
+$icon-arrow-right-extra-small-width: 10px;
+$icon-arrow-right-extra-small-height: 10px;
+$icon-arrow-right-group-titles-width: 14px;
+$icon-arrow-right-group-titles-height: 14px;
+$icon-arrow-right-small-width: 14px;
+$icon-arrow-right-small-height: 14px;
+$icon-attention-width: 24px;
+$icon-attention-height: 24px;
+$icon-attention-filled-width: 24px;
+$icon-attention-filled-height: 24px;
+$icon-attention-filled-small-width: 16px;
+$icon-attention-filled-small-height: 16px;
+$icon-attention-small-width: 16px;
+$icon-attention-small-height: 16px;
+$icon-avatar-light-width: 22px;
+$icon-avatar-light-height: 22px;
+$icon-avatar-filled-width: 22px;
+$icon-avatar-filled-height: 22px;
+$icon-avatar-width: 22px;
+$icon-avatar-height: 22px;
+$icon-avatar-dark-width: 22px;
+$icon-avatar-dark-height: 22px;
+$icon-bank-width: 22px;
+$icon-bank-height: 22px;
+$icon-bank-large-width: 58px;
+$icon-bank-large-height: 58px;
+$icon-bids-width: 23px;
+$icon-bids-height: 23px;
+$icon-calendar-width: 22px;
+$icon-calendar-height: 22px;
+$icon-calendar-large-width: 58px;
+$icon-calendar-large-height: 60px;
+$icon-calendar-small-width: 14px;
+$icon-calendar-small-height: 14px;
+$icon-camera-width: 24px;
+$icon-camera-height: 20px;
+$icon-camera-small-width: 16px;
+$icon-camera-small-height: 14px;
+$icon-cart-width: 23px;
+$icon-cart-height: 22px;
+$icon-cart-large-width: 57px;
+$icon-cart-large-height: 57px;
+$icon-cart-small-width: 15px;
+$icon-cart-small-height: 16px;
+$icon-categories-width: 20px;
+$icon-categories-height: 20px;
+$icon-chat-large-width: 58px;
+$icon-chat-large-height: 53px;
+$icon-chevron-down-width: 18px;
+$icon-chevron-down-height: 10px;
+$icon-chevron-down-extra-small-width: 9px;
+$icon-chevron-down-extra-small-height: 5px;
+$icon-chevron-down-small-width: 14px;
+$icon-chevron-down-small-height: 8px;
+$icon-chevron-left-width: 10px;
+$icon-chevron-left-height: 18px;
+$icon-chevron-left-small-width: 8px;
+$icon-chevron-left-small-height: 14px;
+$icon-chevron-right-width: 10px;
+$icon-chevron-right-height: 18px;
+$icon-chevron-right-small-width: 8px;
+$icon-chevron-right-small-height: 14px;
+$icon-chevron-up-width: 18px;
+$icon-chevron-up-height: 10px;
+$icon-circle-width: 24px;
+$icon-circle-height: 24px;
+$icon-clear-width: 24px;
+$icon-clear-height: 24px;
+$icon-chevron-up-extra-small-width: 9px;
+$icon-chevron-up-extra-small-height: 5px;
+$icon-chevron-up-small-width: 14px;
+$icon-chevron-up-small-height: 8px;
+$icon-clear-small-width: 16px;
+$icon-clear-small-height: 16px;
+$icon-clock-width: 22px;
+$icon-clock-height: 22px;
+$icon-clock-small-width: 16px;
+$icon-clock-small-height: 16px;
+$icon-close-width: 18px;
+$icon-close-height: 18px;
+$icon-close-small-width: 14px;
+$icon-close-small-height: 14px;
+$icon-confirmation-width: 24px;
+$icon-confirmation-height: 24px;
+$icon-confirmation-filled-width: 24px;
+$icon-confirmation-filled-height: 24px;
+$icon-confirmation-filled-small-width: 16px;
+$icon-confirmation-filled-small-height: 16px;
+$icon-confirmation-small-width: 16px;
+$icon-confirmation-small-height: 16px;
+$icon-credit-card-width: 22px;
+$icon-credit-card-height: 16px;
+$icon-credit-card-large-width: 58px;
+$icon-credit-card-large-height: 46px;
+$icon-credit-card-small-width: 16px;
+$icon-credit-card-small-height: 12px;
+$icon-deals-width: 18px;
+$icon-deals-height: 24px;
+$icon-delete-width: 23px;
+$icon-delete-height: 22px;
+$icon-delete-small-width: 16px;
+$icon-delete-small-height: 16px;
+$icon-download-width: 22px;
+$icon-download-height: 22px;
+$icon-edit-width: 22px;
+$icon-edit-height: 22px;
+$icon-edit-small-width: 16px;
+$icon-edit-small-height: 16px;
+$icon-event-width: 22px;
+$icon-event-height: 22px;
+$icon-event-large-width: 58px;
+$icon-event-large-height: 58px;
+$icon-gift-width: 22px;
+$icon-gift-height: 22px;
+$icon-gift-large-width: 58px;
+$icon-gift-large-height: 58px;
+$icon-fast-n-free-width: 22px;
+$icon-fast-n-free-height: 17px;
+$icon-fast-n-free-small-width: 18px;
+$icon-fast-n-free-small-height: 13px;
+$icon-filter-gallery-width: 22px;
+$icon-filter-gallery-height: 18px;
+$icon-filter-gallery-small-width: 15.75px;
+$icon-filter-gallery-small-height: 14px;
+$icon-filter-list-width: 22px;
+$icon-filter-list-height: 18px;
+$icon-filter-list-small-width: 15.75px;
+$icon-filter-list-small-height: 14px;
+$icon-filter-single-width: 22px;
+$icon-filter-single-height: 18px;
+$icon-filter-single-selected-width: 22px;
+$icon-filter-single-selected-height: 18px;
+$icon-filter-single-small-width: 16px;
+$icon-filter-single-small-height: 14px;
+$icon-fingerprint-large-width: 64px;
+$icon-fingerprint-large-height: 64px;
+$icon-support-width: 23px;
+$icon-support-height: 21px;
+$icon-home-width: 20px;
+$icon-home-height: 22px;
+$icon-information-width: 24px;
+$icon-information-height: 24px;
+$icon-information-filled-width: 24px;
+$icon-information-filled-height: 24px;
+$icon-information-filled-small-width: 16px;
+$icon-information-filled-small-height: 16px;
+$icon-information-small-width: 16px;
+$icon-information-small-height: 16px;
+$icon-tablet-condensed-grid-width: 22px;
+$icon-tablet-condensed-grid-height: 22px;
+$icon-tablet-condensed-grid-filled-width: 22px;
+$icon-tablet-condensed-grid-filled-height: 22px;
+$icon-tablet-relaxed-grid-width: 22px;
+$icon-tablet-relaxed-grid-height: 22px;
+$icon-tablet-relaxed-grid-filled-width: 22px;
+$icon-tablet-relaxed-grid-filled-height: 22px;
+$icon-tablet-vertical-split-width: 22px;
+$icon-tablet-vertical-split-height: 22px;
+$icon-tablet-vertical-split-filled-width: 22px;
+$icon-tablet-vertical-split-filled-height: 22px;
+$icon-large-box-width: 22px;
+$icon-large-box-height: 16px;
+$icon-location-width: 16px;
+$icon-location-height: 22px;
+$icon-location-large-width: 42px;
+$icon-location-large-height: 59px;
+$icon-locked-width: 18px;
+$icon-locked-height: 22px;
+$icon-locked-small-width: 12px;
+$icon-locked-small-height: 14px;
+$icon-medium-box-width: 18px;
+$icon-medium-box-height: 16px;
+$icon-menu-width: 20px;
+$icon-menu-height: 18px;
+$icon-messages-width: 22px;
+$icon-messages-height: 18px;
+$icon-messages-large-width: 58px;
+$icon-messages-large-height: 48px;
+$icon-mic-width: 16px;
+$icon-mic-height: 22px;
+$icon-mic-small-width: 12px;
+$icon-mic-small-height: 16px;
+$icon-mobile-width: 14px;
+$icon-mobile-height: 22px;
+$icon-mobile-signal-width: 22px;
+$icon-mobile-signal-height: 22px;
+$icon-notification-width: 22px;
+$icon-notification-height: 24px;
+$icon-overflow-width: 4px;
+$icon-overflow-height: 18px;
+$icon-overflow-small-width: 3px;
+$icon-overflow-small-height: 13px;
+$icon-package-width: 22px;
+$icon-package-height: 20px;
+$icon-photo-brightness-width: 24px;
+$icon-photo-brightness-height: 24px;
+$icon-photo-crop-width: 20px;
+$icon-photo-crop-height: 24px;
+$icon-photo-gallery-width: 22px;
+$icon-photo-gallery-height: 22px;
+$icon-photo-gallery-more-width: 22px;
+$icon-photo-gallery-more-height: 24px;
+$icon-photo-rotate-width: 24px;
+$icon-photo-rotate-height: 21px;
+$icon-photo-select-all-width: 22px;
+$icon-photo-select-all-height: 22px;
+$icon-photo-select-none-width: 23px;
+$icon-photo-select-none-height: 23px;
+$icon-photo-contrast-width: 20px;
+$icon-photo-contrast-height: 20px;
+$icon-photo-flash-width: 16px;
+$icon-photo-flash-height: 22px;
+$icon-photo-flip-camera-width: 24px;
+$icon-photo-flip-camera-height: 20px;
+$icon-photo-sharpen-width: 21px;
+$icon-photo-sharpen-height: 20px;
+$icon-profile-width: 22px;
+$icon-profile-height: 24px;
+$icon-purchases-width: 22px;
+$icon-purchases-height: 20px;
+$icon-purchases-large-width: 60px;
+$icon-purchases-large-height: 56px;
+$icon-red-laser-width: 22px;
+$icon-red-laser-height: 18px;
+$icon-red-laser-small-width: 14px;
+$icon-red-laser-small-height: 12px;
+$icon-refresh-width: 18px;
+$icon-refresh-height: 18px;
+$icon-remove-width: 20px;
+$icon-remove-height: 2px;
+$icon-save-width: 22px;
+$icon-save-height: 20px;
+$icon-save-bold-width: 16px;
+$icon-save-bold-height: 14px;
+$icon-save-selected-width: 22px;
+$icon-save-selected-height: 20px;
+$icon-save-selected-small-width: 16px;
+$icon-save-selected-small-height: 14px;
+$icon-save-small-width: 16px;
+$icon-save-small-height: 14px;
+$icon-search-width: 22px;
+$icon-search-height: 22px;
+$icon-search-large-width: 57px;
+$icon-search-large-height: 57px;
+$icon-search-small-width: 14px;
+$icon-search-small-height: 14px;
+$icon-selling-width: 22px;
+$icon-selling-height: 22px;
+$icon-send-width: 24px;
+$icon-send-height: 19px;
+$icon-settings-width: 24px;
+$icon-settings-height: 24px;
+$icon-settings-small-width: 16px;
+$icon-settings-small-height: 16px;
+$icon-share-width: 18px;
+$icon-share-height: 22px;
+$icon-share-small-width: 12px;
+$icon-share-small-height: 16px;
+$icon-small-box-width: 18px;
+$icon-small-box-height: 12px;
+$icon-small-letter-width: 18px;
+$icon-small-letter-height: 14px;
+$icon-star-dynamic-width: 22px;
+$icon-star-dynamic-height: 22px;
+$icon-star-full-width: 22px;
+$icon-star-full-height: 22px;
+$icon-star-full-small-width: 22px;
+$icon-star-full-small-height: 22px;
+$icon-star-empty-width: 22px;
+$icon-star-empty-height: 22px;
+$icon-star-empty-small-width: 22px;
+$icon-star-empty-small-height: 22px;
+$icon-star-half-width: 22px;
+$icon-star-half-height: 22px;
+$icon-star-half-small-width: 22px;
+$icon-star-half-small-height: 22px;
+$icon-star-undefined-width: 22px;
+$icon-star-undefined-height: 22px;
+$icon-star-undefined-small-width: 22px;
+$icon-star-undefined-small-height: 22px;
+$icon-store-width: 22px;
+$icon-store-height: 22px;
+$icon-store-large-width: 57px;
+$icon-store-large-height: 58px;
+$icon-text-messaging-large-width: 58px;
+$icon-text-messaging-large-height: 53px;
+$icon-thumbs-down-width: 22.917px;
+$icon-thumbs-down-height: 22px;
+$icon-thumbs-down-selected-width: 23px;
+$icon-thumbs-down-selected-height: 22px;
+$icon-thumbs-down-selected-small-width: 14px;
+$icon-thumbs-down-selected-small-height: 15px;
+$icon-thumbs-down-small-width: 16px;
+$icon-thumbs-down-small-height: 16px;
+$icon-thumbs-up-width: 23px;
+$icon-thumbs-up-height: 22px;
+$icon-thumbs-up-selected-width: 23px;
+$icon-thumbs-up-selected-height: 22px;
+$icon-thumbs-up-selected-small-width: 14px;
+$icon-thumbs-up-selected-small-height: 14px;
+$icon-thumbs-up-small-width: 16px;
+$icon-thumbs-up-small-height: 16px;
+$icon-tick-width: 14px;
+$icon-tick-height: 10px;
+$icon-truck-width: 22px;
+$icon-truck-height: 17px;
+$icon-truck-small-width: 16px;
+$icon-truck-small-height: 13px;
+$icon-unlocked-width: 18px;
+$icon-unlocked-height: 22px;
+$icon-unlocked-small-width: 12px;
+$icon-unlocked-small-height: 14px;
+$icon-watch-width: 24px;
+$icon-watch-height: 18px;
+$icon-watch-large-width: 61px;
+$icon-watch-large-height: 43px;
+$icon-pause-filled-width: 24px;
+$icon-pause-filled-height: 24px;
+$icon-pause-filled-large-width: 64px;
+$icon-pause-filled-large-height: 64px;
+$icon-pause-width: 24px;
+$icon-pause-height: 24px;
+$icon-pause-large-width: 60px;
+$icon-pause-large-height: 60px;
+$icon-pause-small-width: 16px;
+$icon-pause-small-height: 16px;
+$icon-play-filled-width: 24px;
+$icon-play-filled-height: 24px;
+$icon-play-filled-large-width: 60px;
+$icon-play-filled-large-height: 60px;
+$icon-play-width: 24px;
+$icon-play-height: 24px;
+$icon-play-large-width: 60px;
+$icon-play-large-height: 60px;
+$icon-play-small-width: 16px;
+$icon-play-small-height: 16px;
+$icon-back-width: 10px;
+$icon-back-height: 18px;
+$icon-breadcrumb-width: 8px;
+$icon-breadcrumb-height: 14px;
+$icon-carousel-next-width: 8px;
+$icon-carousel-next-height: 14px;
+$icon-carousel-prev-width: 8px;
+$icon-carousel-prev-height: 14px;
+$icon-cta-width: 20px;
+$icon-cta-height: 18px;
+$icon-pagination-next-width: 14px;
+$icon-pagination-next-height: 14px;
+$icon-pagination-prev-width: 14px;
+$icon-pagination-prev-height: 14px;
+$icon-checkbox-checked-large-width: 24px;
+$icon-checkbox-checked-large-height: 24px;
+$icon-checkbox-checked-width: 18px;
+$icon-checkbox-checked-height: 18px;
+$icon-checkbox-unchecked-large-width: 24px;
+$icon-checkbox-unchecked-large-height: 24px;
+$icon-checkbox-unchecked-width: 18px;
+$icon-checkbox-unchecked-height: 18px;
+$icon-checkbox-mixed-width: 18px;
+$icon-checkbox-mixed-height: 18px;
+$icon-checkbox-mixed-large-width: 24px;
+$icon-checkbox-mixed-large-height: 24px;
+$icon-checkbox-square-checked-width: 18px;
+$icon-checkbox-square-checked-height: 18px;
+$icon-checkbox-square-checked-large-width: 24px;
+$icon-checkbox-square-checked-large-height: 24px;
+$icon-checkbox-square-unchecked-width: 18px;
+$icon-checkbox-square-unchecked-height: 18px;
+$icon-checkbox-square-unchecked-large-width: 24px;
+$icon-checkbox-square-unchecked-large-height: 24px;
+$icon-following-width: 16px;
+$icon-following-height: 22px;
+$icon-following-small-width: 12px;
+$icon-following-small-height: 16px;
+$icon-radio-checked-width: 18px;
+$icon-radio-checked-height: 18px;
+$icon-radio-checked-large-width: 24px;
+$icon-radio-checked-large-height: 24px;
+$icon-radio-unchecked-width: 18px;
+$icon-radio-unchecked-height: 18px;
+$icon-radio-unchecked-large-width: 24px;
+$icon-radio-unchecked-large-height: 24px;
+$icon-tick-small-width: 12px;
+$icon-tick-small-height: 9px;
+$icon-window-width: 28px;
+$icon-window-height: 25px;
+$icon-arrow-right-bold-width: 22px;
+$icon-arrow-right-bold-height: 21px;
+$icon-chevron-up-bold-width: 21.6px;
+$icon-chevron-up-bold-height: 12.58px;
+$icon-chevron-down-bold-width: 21.6px;
+$icon-chevron-down-bold-height: 12.58px;
+$icon-search-bold-width: 21.6px;
+$icon-search-bold-height: 21.6px;
+$icon-flag-width: 13.36px;
+$icon-flag-height: 21.34px;
+$icon-sign-out-width: 22.5px;
+$icon-sign-out-height: 13.5px;
+$icon-top-seller-width: 14.7px;
+$icon-top-seller-height: 19.96px;
+$icon-user-profile-width: 22px;
+$icon-user-profile-height: 22px;
+$icon-stepper-confirmation-width: 24px;
+$icon-stepper-confirmation-height: 24px;
+$icon-stepper-information-width: 24px;
+$icon-stepper-information-height: 24px;
+$icon-stepper-attention-width: 24px;
+$icon-stepper-attention-height: 24px;
+$icon-dropdown-width: 21.6px;
+$icon-dropdown-height: 12.58px;
+$icon-eek-range-arrow-width: 5px;
+$icon-eek-range-arrow-height: 6px;
+$icon-eek-arrow-width: 11px;
+$icon-eek-arrow-height: 28px;
+$icon-bag-width: 24px;
+$icon-bag-height: 24px;
+$icon-small-case-width: 24px;
+$icon-small-case-height: 24px;
+$icon-large-case-width: 24px;
+$icon-large-case-height: 24px;
+$icon-customize-width: 24px;
+$icon-customize-height: 24px;
+$icon-help-width: 24px;
+$icon-help-height: 24px;
+$icon-help-small-width: 16px;
+$icon-help-small-height: 16px;
+$icon-history-width: 24px;
+$icon-history-height: 24px;
+$icon-lightbulb-width: 24px;
+$icon-lightbulb-height: 24px;
+$icon-print-width: 24px;
+$icon-print-height: 24px;
+$icon-envelope-width: 24px;
+$icon-envelope-height: 24px;
+$icon-security-key-width: 24px;
+$icon-security-key-height: 24px;
+$icon-shoe-box-width: 24px;
+$icon-shoe-box-height: 24px;
+$icon-suitcase-width: 24px;
+$icon-suitcase-height: 24px;
+$icon-report-flag-width: 24px;
+$icon-report-flag-height: 24px;
+$icon-report-flag-small-width: 16px;
+$icon-report-flag-small-height: 16px;
+$icon-video-play-width: 24px;
+$icon-video-play-height: 24px;
+$icon-video-pause-width: 24px;
+$icon-video-pause-height: 24px;
+$icon-vault-width: 24px;
+$icon-vault-height: 24px;
+$icon-vault-small-width: 16px;
+$icon-vault-small-height: 16px;
+$icon-social-link-width: 23px;
+$icon-social-link-height: 24px;
+$icon-social-discord-width: 24px;
+$icon-social-discord-height: 18px;
+$icon-social-facebook-width: 24px;
+$icon-social-facebook-height: 24px;
+$icon-social-messenger-width: 24px;
+$icon-social-messenger-height: 24px;
+$icon-social-pinterest-width: 24px;
+$icon-social-pinterest-height: 24px;
+$icon-social-reddit-width: 24px;
+$icon-social-reddit-height: 24px;
+$icon-social-twitter-width: 24px;
+$icon-social-twitter-height: 19px;
+$icon-social-linkedin-width: 22px;
+$icon-social-linkedin-height: 22px;
+$icon-social-whatsapp-width: 24px;
+$icon-social-whatsapp-height: 24px;
+$icon-spinner-width: 24px;
+$icon-spinner-height: 24px;
+$icon-spinner-large-width: 40px;
+$icon-spinner-large-height: 40px;
+$icon-show-secret-width: 24px;
+$icon-show-secret-height: 24px;
+$icon-hide-secret-width: 24px;
+$icon-hide-secret-height: 24px;

package/src/sass/mixins/private/_icon-mixins.scss ADDED Viewed

@@ -0,0 +1,12 @@
+$icon-spinner-large-height: 60px;
+$icon-spinner-large-width: 60px;
+/* base styles for BEM svg.icon block */
+@mixin icon-base-mixin() {
+    display: inline-block;
+    fill: currentColor;
+    pointer-events: none;
+    stroke: currentColor;
+    stroke-width: 0;
+    vertical-align: middle;
+}

package/src/sass/mixins/private/_listbox-mixins.scss ADDED Viewed

@@ -0,0 +1,48 @@
+@import "./selection-list-mixins";
+@mixin listbox-option-base() {
+    @include selection-list-item-base();
+    @include border-color-token(
+        listbox-option-border-color,
+        color-background-primary
+    );
+    @include color-token(
+        listbox-option-foreground-color,
+        color-foreground-primary
+    );
+    &[hidden] {
+        display: none; /* https://css-tricks.com/the-hidden-attribute-is-visibly-weak/ */
+    }
+    &:hover {
+        background-color: var(--color-state-primary-hover);
+        @include color-token(
+            listbox-option-hover-foreground-color,
+            color-foreground-primary
+        );
+    }
+    &:active {
+        font-weight: bold;
+    }
+    &:disabled,
+    &[aria-disabled="true"] {
+        @include listbox-disabled();
+    }
+}
+@mixin listbox-disabled() {
+    @include color-token(
+        listbox-option-disabled-foreground-color,
+        color-foreground-disabled
+    );
+    background-color: unset;
+    font-weight: unset;
+}
+@mixin listbox-option-status() {
+    @include selection-list-item-status();
+}

package/src/sass/mixins/private/_menu-mixins.scss ADDED Viewed

@@ -0,0 +1,30 @@
+@import "./selection-list-mixins";
+@mixin menu-menuitem-base($component) {
+    @include selection-list-item-base();
+    @include border-color-token(
+        #{$component}-menuitem-border-color,
+        color-background-primary
+    );
+    @include color-token(
+        #{$component}-menuitem-foreground-color,
+        color-foreground-primary
+    );
+    &:hover {
+        background-color: var(--color-state-primary-hover);
+        @include color-token(
+            #{$component}-menuitem-hover-foreground-color,
+            color-foreground-primary
+        );
+    }
+    &:active {
+        font-weight: bold;
+    }
+}
+@mixin menu-menuitem-status() {
+    @include selection-list-item-status();
+}

package/src/{less/mixins/private/selection-list-mixins.less → sass/mixins/private/_selection-list-mixins.scss} RENAMED Viewed

@@ -1,4 +1,4 @@
-.selection-list-item-base() {
+@mixin selection-list-item-base() {
     background-color: transparent;
     border-style: solid;
     border-width: 1px;
@@ -15,11 +15,11 @@
     }
     &:focus {
-        outline-offset: -4px; // offset to accomodate hidden overflow
+        outline-offset: -4px; /* offset to accomodate hidden overflow */
     }
 }
-.selection-list-item-status() {
+@mixin selection-list-item-status() {
     align-self: center;
     fill: currentColor;
     margin: 0 auto;