@ebay/skin 16.0.0-1 → 16.0.0

package/dist/button/button.css

@@ -168,8 +168,8 @@ a.fake-btn--primary.fake-btn--destructive {
 }
 button.btn--primary.btn--destructive[disabled],
 button.btn--primary.btn--destructive[aria-disabled="true"] {
-  background-color: var(--btn-primary-destructive-disabled-background, var(--color-background-attention));
-  border-color: var(--btn-primary-destructive-disabled-border, var(--color-stroke-attention));
+  background-color: var(--btn-primary-destructive-disabled-background, var(--color-background-disabled));
+  border-color: var(--btn-primary-destructive-disabled-border, var(--color-stroke-disabled));
 }
 button.btn--primary.btn--destructive:not([disabled], [aria-disabled="true"]):focus,
 a.fake-btn--primary.fake-btn--destructive[href]:focus,
@@ -208,8 +208,8 @@ a.fake-btn--large svg.icon {
 }
 button.btn--primary[disabled],
 button.btn--primary[aria-disabled="true"] {
-  background-color: var(--btn-primary-disabled-background-color, var(--color-background-accent));
-  border-color: var(--btn-primary-disabled-border-color, var(--color-background-accent));
+  background-color: var(--btn-primary-disabled-background-color, var(--color-foreground-disabled));
+  border-color: var(--btn-primary-disabled-border-color, var(--color-foreground-disabled));
   color: var(--btn-primary-foreground-color, var(--color-foreground-on-accent));
 }
 button.btn--primary[disabled] svg.icon,

package/dist/calendar/calendar.css

@@ -84,18 +84,22 @@
 /************
  *** DAYS ***
  ************/
-.calendar__month td[aria-current="date"]:not([aria-selected="true"]) > :not(:disabled, [aria-disabled="true"]) {
+.calendar__month td:not(.calendar__cell--selected) > [aria-current="date"]:not(:disabled),
+.calendar__month td:not(.calendar__cell--selected) > .calendar__cell--current:not(.calendar__cell--disabled) {
   border-color: var(--calendar-day-today-border-color, var(--color-foreground-primary));
   border-style: solid;
 }
 .calendar__month td > :disabled,
-.calendar__month .calendar__cell--disabled {
+.calendar__month td > .calendar__cell--disabled {
   color: var(--calendar-day-disabled-color, var(--color-foreground-disabled));
 }
-.calendar__month td:not(.calendar__range, [aria-selected="true"]) > button:not(:disabled):hover {
+.calendar__month td:not(.calendar__range, .calendar__cell--selected) > button:not(:disabled):hover {
   background-color: var(--calendar-day-hover-background-color, var(--color-state-primary-hover));
 }
-.calendar__month td[aria-selected="true"] > * {
+.calendar__month td:not(.calendar__range, .calendar__cell--selected) > button:not(:disabled):active {
+  font-weight: bold;
+}
+.calendar__month td.calendar__cell--selected > * {
   background-color: var(--calendar-day-selected-background-color, var(--color-background-inverse));
   color: var(--calendar-day-selected-color, var(--color-foreground-on-inverse));
   font-weight: bold;
@@ -133,7 +137,7 @@
 .calendar__range--start.calendar__range--end {
   background: transparent;
 }
-.calendar__range--start:not([aria-selected="true"]) > :not(:disabled, [aria-disabled="true"]),
-.calendar__range--end:not([aria-selected="true"]) > :not(:disabled, [aria-disabled="true"]) {
+.calendar__range--start:not(.calendar__cell--selected) > :not(:disabled, [aria-disabled="true"]),
+.calendar__range--end:not(.calendar__cell--selected) > :not(:disabled, [aria-disabled="true"]) {
   background-color: var(--calendar-day-range-end, var(--color-state-secondary-active));
 }

package/dist/date-textbox/date-textbox.css

@@ -4,6 +4,9 @@
 .date-textbox {
   --calendar-month-width: 311px;
 }
+.date-textbox > .textbox + .textbox {
+  margin-left: 8px;
+}
 .date-textbox__popover {
   background-color: var(--calendar-background-color, var(--color-background-primary));
   border-radius: 16px;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "16.0.0-1",
+    "version": "16.0.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -23,6 +23,7 @@
         "postpublish": "node scripts clean",
         "build": "npm run build:css && npm run lint:js && npm run bundle && npm run build:site && npm run copy",
         "build:css": "npm run lint:less && gulp && npm run lint:css",
+        "build:ci": "npm run build:css && npm run lint:js && npm run bundle && npm run copy",
         "build:jekyll": "bundler exec jekyll build --incremental --config docs/_config.yml,docs/_config.localhost.yml",
         "build:site": "npm run copy:svgToDocs && npm run build:jekyll",
         "build:storybook": "npm run copy:assetsToStorybook && npm run build:storybook:ds6",

package/src/less/button/button.less

@@ -132,8 +132,8 @@ a.fake-btn--primary.fake-btn--destructive {
 
 button.btn--primary.btn--destructive[disabled],
 button.btn--primary.btn--destructive[aria-disabled="true"] {
-    .background-color-token(btn-primary-destructive-disabled-background, color-background-attention);
-    .border-color-token(btn-primary-destructive-disabled-border, color-stroke-attention);
+    .background-color-token(btn-primary-destructive-disabled-background, color-background-disabled);
+    .border-color-token(btn-primary-destructive-disabled-border, color-stroke-disabled);
 }
 
 button.btn--primary.btn--destructive:not([disabled], [aria-disabled="true"]),
@@ -181,8 +181,8 @@ a.fake-btn--large svg.icon {
 
 button.btn--primary[disabled],
 button.btn--primary[aria-disabled="true"] {
-    .background-color-token(btn-primary-disabled-background-color, color-background-accent);
-    .border-color-token(btn-primary-disabled-border-color, color-background-accent);
+    .background-color-token(btn-primary-disabled-background-color, color-foreground-disabled);
+    .border-color-token(btn-primary-disabled-border-color, color-foreground-disabled);
     .color-token(btn-primary-foreground-color, color-foreground-on-accent);
 
     svg.icon {

package/src/less/button/stories/button/primary.stories.js

@@ -40,15 +40,3 @@ export const busy = () => `
     </span>
 </button>
 `;
-
-export const busyDisabled = () => `
-<button class="btn btn--primary" aria-label="Busy" aria-disabled="true" disabled>
-    <span class="btn__cell">
-        <span class="progress-spinner">
-            <svg class="icon icon--spinner-24" focusable="false" aria-hidden="true">
-                <use href="#icon-spinner-24"></use>
-            </svg>
-        </span>
-    </span>
-</button>
-`;

package/src/less/button/stories/destructive-button/primary.stories.js

@@ -34,13 +34,3 @@ export const busy = () => `
     </span>
 </button>
 `;
-
-export const busyDisabled = () => `
-<button class="btn btn--primary btn--destructive" aria-label="Busy" aria-disabled="true" disabled>
-    <span class="progress-spinner">
-        <svg aria-hidden="true" class="icon icon--spinner-24" focusable="false">
-            <use href="#icon-spinner-24"></use>
-        </svg>
-    </span>
-</button>
-`;

package/src/less/calendar/calendar.less

@@ -108,23 +108,30 @@
  *** DAYS ***
  ************/
 
+.calendar__month td:not(.calendar__cell--selected) > [aria-current="date"]:not(:disabled),
 .calendar__month
-    td[aria-current="date"]:not([aria-selected="true"])
-    > :not(:disabled, [aria-disabled="true"]) {
+    td:not(.calendar__cell--selected)
+    > .calendar__cell--current:not(.calendar__cell--disabled) {
     .border-color-token(calendar-day-today-border-color, color-foreground-primary);
     border-style: solid;
 }
 
 .calendar__month td > :disabled,
-.calendar__month .calendar__cell--disabled {
+.calendar__month td > .calendar__cell--disabled {
     .color-token(calendar-day-disabled-color, color-foreground-disabled);
 }
 
-.calendar__month td:not(.calendar__range, [aria-selected="true"]) > button:not(:disabled):hover {
+.calendar__month td:not(.calendar__range, .calendar__cell--selected) > button:not(:disabled):hover {
     .background-color-token(calendar-day-hover-background-color, color-state-primary-hover);
 }
 
-.calendar__month td[aria-selected="true"] > * {
+.calendar__month
+    td:not(.calendar__range, .calendar__cell--selected)
+    > button:not(:disabled):active {
+    font-weight: bold;
+}
+
+.calendar__month td.calendar__cell--selected > * {
     .background-color-token(calendar-day-selected-background-color, color-background-inverse);
     .color-token(calendar-day-selected-color, color-foreground-on-inverse);
     font-weight: bold;
@@ -174,7 +181,7 @@
     background: transparent;
 }
 
-.calendar__range--start:not([aria-selected="true"]) > :not(:disabled, [aria-disabled="true"]),
-.calendar__range--end:not([aria-selected="true"]) > :not(:disabled, [aria-disabled="true"]) {
+.calendar__range--start:not(.calendar__cell--selected) > :not(:disabled, [aria-disabled="true"]),
+.calendar__range--end:not(.calendar__cell--selected) > :not(:disabled, [aria-disabled="true"]) {
     .background-color-token(calendar-day-range-end, color-state-secondary-active);
 }