@ebay/skin 18.0.0-next.0 → 18.0.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Skin Changelog
 
+## 18.0.1
+
+### Patch Changes
+
+-   [#2361](https://github.com/eBay/skin/pull/2361) [`735ea66`](https://github.com/eBay/skin/commit/735ea66b32299793174f3eaa5fc04a1b444e3573) Thanks [@agliga](https://github.com/agliga)! - fix: added variables.less back into repo
+
+## 18.0.0
+
+### Major Changes
+
+-   [#2346](https://github.com/eBay/skin/pull/2346) [`9eacce0`](https://github.com/eBay/skin/commit/9eacce09ed99edd4306e97632a1e5fbdc0ab68cd) Thanks [@agliga](https://github.com/agliga)! - refactor: removed all duplicate icon classes and added icon--{nn} classes
+
+-   [#2352](https://github.com/eBay/skin/pull/2352) [`c2e6002`](https://github.com/eBay/skin/commit/c2e6002eb919c6f0325ca11de925112a6a72b5c3) Thanks [@agliga](https://github.com/agliga)! - chore: removed deprecations
+
+-   [#2356](https://github.com/eBay/skin/pull/2356) [`7554ab4`](https://github.com/eBay/skin/commit/7554ab4c6f183d6d8ca898a09b39c5b6396f0d7a) Thanks [@ArtBlue](https://github.com/ArtBlue)! - tokens: added tokens, colors, deprecations
+
+-   [#2345](https://github.com/eBay/skin/pull/2345) [`55291f6`](https://github.com/eBay/skin/commit/55291f659ace187d4b96707db84c4a54709182a2) Thanks [@ArtBlue](https://github.com/ArtBlue)! - toggle-button-group: reworked responsiveness and added equal button heights
+
+### Minor Changes
+
+-   [#2344](https://github.com/eBay/skin/pull/2344) [`d9792aa`](https://github.com/eBay/skin/commit/d9792aabe896c594daced5d6cb44ba8e124a7a1a) Thanks [@mikehobi](https://github.com/mikehobi)! - feat(donut-chart): new module
+
+### Patch Changes
+
+-   [#2348](https://github.com/eBay/skin/pull/2348) [`86621e8`](https://github.com/eBay/skin/commit/86621e86edc1bb419a143f964d3a63105ced0aeb) Thanks [@agliga](https://github.com/agliga)! - feat: added sass support and removed less support
+
 ## 18.0.0-next.0
 
 ### Major Changes

package/dist/breadcrumbs/breadcrumbs.css

@@ -36,7 +36,7 @@ nav.breadcrumbs > ul > li svg {
     margin-right: 3px;
 }
 
-nav.breadcrumbs > ul > li svg.icon--chevron-right-12 {
+nav.breadcrumbs > ul > li svg.icon--12 {
     margin-left: var(--spacing-75);
     margin-right: var(--spacing-75);
 }
@@ -115,7 +115,7 @@ nav.breadcrumbs .menu-button__menu {
     font-size: var(--font-size-default);
 }
 
-[dir="rtl"] nav.breadcrumbs svg.icon--chevron-right-12 {
+[dir="rtl"] nav.breadcrumbs svg.icon--12 {
     transform: rotate(180deg);
 }
 

package/dist/bundles/skin-default.css

@@ -788,7 +788,7 @@ nav.breadcrumbs>ul>li svg{
   margin-right:3px;
 }
 
-nav.breadcrumbs>ul>li svg.icon--chevron-right-12{
+nav.breadcrumbs>ul>li svg.icon--12{
   margin-left:var(--spacing-75);
   margin-right:var(--spacing-75);
 }
@@ -849,7 +849,7 @@ nav.breadcrumbs .fake-menu-button__menu,nav.breadcrumbs .menu-button__menu{
   font-size:var(--font-size-default);
 }
 
-[dir=rtl] nav.breadcrumbs svg.icon--chevron-right-12{
+[dir=rtl] nav.breadcrumbs svg.icon--12{
   transform:rotate(180deg);
 }
 
@@ -1032,7 +1032,7 @@ button.btn--primary.btn--destructive .progress-spinner{
   --color-spinner-icon-foreground:#ec7089;
 }
 
-a.fake-btn[aria-expanded=true] svg.icon--chevron-down-12,button.btn[aria-expanded=true] svg.icon--chevron-down-12{
+a.fake-btn[aria-expanded=true] svg.icon--12,button.btn[aria-expanded=true] svg.icon--12{
   transform:rotate(180deg);
 }
 
@@ -1416,18 +1416,14 @@ div.carousel{
 }
 .carousel__control--prev{
   left:calc(var(--spacing-200)*-1);
+  -webkit-margin-end:1px;
+          margin-inline-end:1px;
 }
 .carousel__control--next{
   right:calc(var(--spacing-200)*-1);
-}
-.carousel__control .icon--chevron-right-12{
   -webkit-margin-start:1px;
           margin-inline-start:1px;
 }
-.carousel__control .icon--chevron-left-12{
-  -webkit-margin-end:1px;
-          margin-inline-end:1px;
-}
 .carousel__control svg{
   color:var(--carousel-paddle-foreground-color, var(--color-foreground-primary));
 }
@@ -1488,7 +1484,7 @@ span.carousel,span.carousel__container{
   left:calc(var(--spacing-200)*-1);
   right:unset;
 }
-[dir=rtl] .carousel__control .icon--chevron-left-12,[dir=rtl] .carousel__control .icon--chevron-right-12{
+[dir=rtl] .carousel__control .icon--12{
   transform:rotate(180deg);
 }
 @supports not ((-webkit-scroll-snap-coordinate:0 0) or (-ms-scroll-snap-coordinate:0 0) or (scroll-snap-coordinate:0 0) or (scroll-snap-align:start)){
@@ -2159,11 +2155,11 @@ span.combobox{
   display:block;
 }
 
-.combobox--expanded svg.icon--chevron-down-12{
+.combobox--expanded svg.icon--12{
   transform:rotate(180deg);
 }
 
-.combobox__control>svg.icon--chevron-down-12{
+.combobox__control>svg.icon--12{
   color:var(--combobox-textbox-icon-color, var(--color-foreground-primary));
   pointer-events:none;
   position:absolute;
@@ -3317,19 +3313,19 @@ button.filter-menu-form__footer[type=submit]:hover,button.filter-menu__footer:ho
   margin-left:8px;
 }
 
-.filter-menu__item[role=menuitemcheckbox] svg.icon--checkbox-checked-18,.filter-menu__item[role=menuitemradio] svg.icon--radio-checked-18{
+.filter-menu__item[role=menuitemcheckbox] svg.icon--checked,.filter-menu__item[role=menuitemradio] svg.icon--checked{
   display:none;
 }
 
-.filter-menu__item[role=menuitemcheckbox] svg.icon--checkbox-unchecked-18,.filter-menu__item[role=menuitemradio] svg.icon--radio-unchecked-18{
+.filter-menu__item[role=menuitemcheckbox] svg.icon--unchecked,.filter-menu__item[role=menuitemradio] svg.icon--unchecked{
   display:block;
 }
 
-.filter-menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checkbox-unchecked-18,.filter-menu__item[role=menuitemradio][aria-checked=true] svg.icon--radio-unchecked-18{
+.filter-menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--unchecked,.filter-menu__item[role=menuitemradio][aria-checked=true] svg.icon--unchecked{
   display:none;
 }
 
-.filter-menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checkbox-checked-18,.filter-menu__item[role=menuitemradio][aria-checked=true] svg.icon--radio-checked-18{
+.filter-menu__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checked,.filter-menu__item[role=menuitemradio][aria-checked=true] svg.icon--checked{
   display:block;
 }
 div.filter-menu__item[role^=menuitem]:focus:not(:focus-visible){
@@ -3381,7 +3377,7 @@ button.filter-menu-button__button:active,button.filter-menu-button__button:focus
 .filter-menu-button__button-cell{
   display:flex;
 }
-.filter-menu-button__button-cell svg.icon--chevron-down-12{
+.filter-menu-button__button-cell svg.icon--12{
   align-self:center;
   color:var(--filter-menu-button-icon-color, var(--color-foreground-primary));
   -webkit-margin-start:8px;
@@ -3460,26 +3456,26 @@ span.filter-menu-button__checkbox,span.filter-menu-button__radio{
   width:18px;
 }
 
-span.filter-menu-button__checkbox svg.icon--checkbox-unchecked-18{
+span.filter-menu-button__checkbox svg.icon--unchecked{
   color:var(--filter-menu-item-unchecked-color, var(--color-foreground-secondary));
   display:block;
   height:18px;
   width:18px;
 }
-span.filter-menu-button__checkbox svg.icon--checkbox-checked-18{
+span.filter-menu-button__checkbox svg.icon--checked{
   color:var(--filter-menu-item-checked-color, var(--color-foreground-primary));
   display:none;
   height:18px;
   width:18px;
 }
 
-span.filter-menu-button__radio svg.icon--radio-unchecked-18{
+span.filter-menu-button__radio svg.icon--unchecked{
   color:var(--filter-menu-item-unchecked-color, var(--color-foreground-primary));
   display:block;
   height:18px;
   width:18px;
 }
-span.filter-menu-button__radio svg.icon--radio-checked-18{
+span.filter-menu-button__radio svg.icon--checked{
   color:var(--filter-menu-item-checked-color, var(--color-foreground-primary));
   display:none;
   height:18px;
@@ -3580,17 +3576,17 @@ button.filter-menu-button__footer:focus,button.filter-menu-button__footer:hover{
   margin-left:8px;
 }
 
-.filter-menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checkbox-unchecked-18{
+.filter-menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--unchecked{
   display:none;
 }
-.filter-menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checkbox-checked-18{
+.filter-menu-button__item[role=menuitemcheckbox][aria-checked=true] svg.icon--checked{
   display:block;
 }
 
-.filter-menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--radio-unchecked-18{
+.filter-menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--unchecked{
   display:none;
 }
-.filter-menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--radio-checked-18{
+.filter-menu-button__item[role=menuitemradio][aria-checked=true] svg.icon--checked{
   display:block;
 }
 div.filter-menu-button__item[role^=menuitem]:focus:not(:focus-visible){
@@ -4971,6 +4967,15 @@ svg.icon--64-colored{
 svg.icon--disabled{
   filter:var(--color-icon-disabled-filter);
 }
+svg.icon--attention-filled{
+  color:var(--color-foreground-attention);
+}
+svg.icon--confirmation-filled{
+  color:var(--color-foreground-confirmation);
+}
+svg.icon--information-filled{
+  color:var(--color-foreground-information);
+}
 a.icon-link{
   align-items:center;
   display:inline-flex;
@@ -5549,7 +5554,7 @@ button.icon-btn.lightbox-dialog__prev{
   max-height:95%;
 }
 
-[dir=rtl] button.icon-btn.lightbox-dialog__prev .icon--chevron-left-16{
+[dir=rtl] button.icon-btn.lightbox-dialog__prev .icon--16{
   transform:rotate(180deg);
 }
 
@@ -7847,7 +7852,7 @@ span.select{
   vertical-align:middle;
 }
 
-.select svg.icon--chevron-down-12{
+.select svg.icon--12{
   height:100%;
   pointer-events:none;
   position:absolute;
@@ -8905,7 +8910,7 @@ button.toast-dialog__close>svg{
   min-width:var(--toggle-button-list-width-min);
 }
 
-.toggle-button--list-layout .toggle-button__content,.toggle-button--list-layout .toggle-button__image-container{
+.toggle-button--list-layout .toggle-button__content:not(:only-child),.toggle-button--list-layout .toggle-button__image-container{
   align-self:self-start;
 }
 
@@ -9018,7 +9023,7 @@ button.toast-dialog__close>svg{
   min-width:auto;
 }
 
-.toggle-button-group--list-layout .toggle-button__content,.toggle-button-group--list-layout .toggle-button__image-container{
+.toggle-button-group--list-layout .toggle-button__content:not(:only-child),.toggle-button-group--list-layout .toggle-button__image-container{
   align-self:flex-start;
 }