From 451e34b19b8ef85510d1c497ac12514b632bc097 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Wed, 18 Apr 2018 14:31:23 -0500 Subject: [PATCH] feat(color): Update colors (#711) * feat(color): start updating colors * feat(color): update more colors * feat(color): update hover colors * feat(color): tweak some more colors * feat(color): update date-picker colors * feat(color): update table colors --- src/components/accordion/_accordion.scss | 8 +- src/components/breadcrumb/_breadcrumb.scss | 6 +- src/components/button/_button.scss | 4 +- src/components/card/_card.scss | 8 +- src/components/checkbox/_checkbox.scss | 4 +- .../content-switcher/_content-switcher.scss | 28 +- src/components/copy-button/_copy-button.scss | 6 +- .../data-table-v2/_data-table-v2-action.scss | 6 +- .../data-table-v2/_data-table-v2-core.scss | 12 +- .../_data-table-v2-expandable.scss | 6 +- src/components/data-table/_data-table.scss | 8 +- src/components/date-picker/_date-picker.scss | 47 +- src/components/date-picker/_flatpickr.scss | 172 +-- .../_detail-page-header.scss | 2 +- src/components/dropdown/_dropdown.scss | 8 +- .../file-uploader/_file-uploader.scss | 3 +- src/components/link/_link.scss | 6 +- src/components/module/_module.scss | 2 +- .../notification/_inline-notification.scss | 4 +- .../notification/_toast-notification.scss | 10 +- .../number-input/_number-input.scss | 6 +- .../order-summary/_order-summary.scss | 4 +- .../overflow-menu/_overflow-menu.scss | 21 +- src/components/pagination/_pagination.scss | 9 +- src/components/pagination/pagination.html | 8 +- .../_progress-indicator.scss | 4 +- .../radio-button/_radio-button.scss | 2 +- src/components/search/_search.scss | 8 +- src/components/select/_select.scss | 2 +- src/components/slider/_slider.scss | 4 +- .../structured-list/_structured-list.scss | 12 +- src/components/tabs/_tabs.scss | 9 +- src/components/text-area/_text-area.scss | 2 +- src/components/text-input/_text-input.scss | 2 +- src/components/tile/_tile.scss | 14 +- src/components/time-picker/_time-picker.scss | 2 +- src/components/toggle/_toggle.scss | 8 +- src/components/toolbar/_toolbar.scss | 4 +- src/components/tooltip/_tooltip.scss | 16 +- yarn.lock | 1031 ++++++++++++++--- 40 files changed, 1132 insertions(+), 386 deletions(-) diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index 28cb1b9d56af..6fb6cbfcd136 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -17,7 +17,7 @@ .#{$prefix}--accordion__item { transition: all $transition--base $carbon--standard-easing; - border-top: 1px solid $ui-04; + border-top: 1px solid $ui-03; overflow: hidden; &:focus { @@ -26,12 +26,12 @@ .#{$prefix}--accordion__arrow { @include focus-outline('border'); overflow: visible; // safari fix - outline-offset: -.5px; // safari fix + outline-offset: -0.5px; // safari fix } } &:last-child { - border-bottom: 1px solid $ui-04; + border-bottom: 1px solid $ui-03; } } @@ -53,7 +53,7 @@ .#{$prefix}--accordion__arrow { @include focus-outline('border'); overflow: visible; // safari fix - outline-offset: -.5px; // safari fix + outline-offset: -0.5px; // safari fix } } } diff --git a/src/components/breadcrumb/_breadcrumb.scss b/src/components/breadcrumb/_breadcrumb.scss index e80b0bf4653f..2ae4b06bbece 100644 --- a/src/components/breadcrumb/_breadcrumb.scss +++ b/src/components/breadcrumb/_breadcrumb.scss @@ -28,7 +28,7 @@ .#{$prefix}--breadcrumb-item::after { content: '/'; margin-left: $spacing-md; - color: $text-03; + color: $text-02; } .#{$prefix}--breadcrumb--no-trailing-slash .#{$prefix}--breadcrumb-item:last-child::after { @@ -52,8 +52,8 @@ &:hover, &:focus { outline: none; - color: $brand-01; - border-bottom: 1px solid $brand-01; + color: $hover-primary-text; + border-bottom: 1px solid $hover-primary-text; } // Applies to Firefox only diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 2859862288ac..d0a6d9fdf765 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -39,7 +39,7 @@ $brand-01, transparent, $inverse-01, - $brand-02, + $hover-primary, $ui-01 ); } @@ -49,7 +49,7 @@ transparent, $brand-01, $brand-01, - $brand-01, + $hover-secondary, $brand-01 ); diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index 94f6babe1787..c5419d09ab8a 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -26,7 +26,7 @@ width: rem(200px); height: rem(240px); background-color: $ui-01; - border: 1px solid $ui-04; + border: 1px solid $ui-03; &:focus { @include focus-outline('border'); @@ -58,7 +58,7 @@ align-items: center; justify-content: space-between; height: rem(48px); - background-color: $ui-03; + background-color: $ui-02; padding-left: 1rem; padding-right: 1rem; @@ -130,7 +130,7 @@ width: rem(50px); height: rem(50px); background-color: $ui-01; - border: 1px solid $ui-04; + border: 1px solid $ui-03; border-radius: 100%; .#{$prefix}--about__icon--img { @@ -181,7 +181,7 @@ &:hover, &:focus { .#{$prefix}--app-actions__button--icon { - fill: $brand-01; + fill: $hover-secondary; } } diff --git a/src/components/checkbox/_checkbox.scss b/src/components/checkbox/_checkbox.scss index adfccdbae38d..378d2f8dda74 100644 --- a/src/components/checkbox/_checkbox.scss +++ b/src/components/checkbox/_checkbox.scss @@ -45,7 +45,7 @@ top: calc(50% - 9px); height: rem(18px); width: rem(18px); - border: $checkbox-border-width solid $ui-05; + border: $checkbox-border-width solid $ui-04; background-color: $ui-01; } @@ -116,7 +116,7 @@ width: rem(18px); margin-right: $spacing-xs; background-color: $ui-01; - border: $checkbox-border-width solid $ui-05; + border: $checkbox-border-width solid $ui-04; min-width: rem(18px); } diff --git a/src/components/content-switcher/_content-switcher.scss b/src/components/content-switcher/_content-switcher.scss index 64175c7e2431..8525587d241a 100644 --- a/src/components/content-switcher/_content-switcher.scss +++ b/src/components/content-switcher/_content-switcher.scss @@ -29,10 +29,10 @@ &:focus { outline: 1px solid transparent; - box-shadow: 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20; - background-color: $brand-02; + // box-shadow: 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20; + background-color: $hover-primary; z-index: 2; - border-color: $brand-02; + border-color: $hover-primary; text-decoration: underline; color: $inverse-01; } @@ -43,8 +43,8 @@ &:hover, &:active { - background-color: $brand-02; - border-color: $brand-02; + background-color: $hover-primary; + border-color: $hover-primary; color: $inverse-01; } } @@ -64,6 +64,10 @@ .#{$prefix}--content-switcher-btn:not(:first-of-type) { border-left: $content-switcher-option-border; + + &:hover { + border-left-color: $hover-primary; + } } .#{$prefix}--content-switcher-btn:first-of-type { @@ -71,11 +75,11 @@ border-top-left-radius: $content-switcher-border-radius; &:hover { - border-color: $brand-02; + border-color: $hover-primary; } &:focus { - box-shadow: -2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20; + // box-shadow: -2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20; z-index: 0; } } @@ -85,11 +89,11 @@ border-bottom-right-radius: $content-switcher-border-radius; &:hover { - border-color: $brand-02; + border-color: $hover-primary; } &:focus { - box-shadow: 2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20; + // box-shadow: 2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20; z-index: 0; } } @@ -100,8 +104,10 @@ font-weight: 400; outline: 1px solid transparent; - &:hover { - border-color: $brand-01; + &:hover, + &:focus { + border-color: $hover-primary; + background-color: $hover-primary; } } } diff --git a/src/components/copy-button/_copy-button.scss b/src/components/copy-button/_copy-button.scss index 7f72905d487c..a9ffa6aadb37 100644 --- a/src/components/copy-button/_copy-button.scss +++ b/src/components/copy-button/_copy-button.scss @@ -28,7 +28,7 @@ @include typescale('omega'); top: 1.1rem; padding: 0.5rem 1rem; - border: 1px solid $ui-04; + border: 1px solid $ui-03; color: $text-01; content: attr(data-feedback); transform: translateX(-50%); @@ -40,8 +40,8 @@ top: 0.85rem; width: 0.5rem; height: 0.5rem; - border-right: 1px solid $ui-04; - border-bottom: 1px solid $ui-04; + border-right: 1px solid $ui-03; + border-bottom: 1px solid $ui-03; content: ''; transform: rotate(-135deg); } diff --git a/src/components/data-table-v2/_data-table-v2-action.scss b/src/components/data-table-v2/_data-table-v2-action.scss index 543e4f59d3ab..6710d66b4987 100644 --- a/src/components/data-table-v2/_data-table-v2-action.scss +++ b/src/components/data-table-v2/_data-table-v2-action.scss @@ -37,20 +37,20 @@ &:hover { > .#{$prefix}--toolbar-action__icon { - fill: $brand-01; + fill: $hover-secondary; } } &:focus { @include focus-outline; > .#{$prefix}--toolbar-action__icon { - fill: $brand-01; + fill: $hover-secondary; } } &:active { > .#{$prefix}--toolbar-action__icon { - fill: darken($brand-01, 5%); + fill: $hover-secondary; } } diff --git a/src/components/data-table-v2/_data-table-v2-core.scss b/src/components/data-table-v2/_data-table-v2-core.scss index 6166840f0d6a..825ff5fe3d56 100644 --- a/src/components/data-table-v2/_data-table-v2-core.scss +++ b/src/components/data-table-v2/_data-table-v2-core.scss @@ -12,7 +12,7 @@ border-collapse: collapse; border-spacing: 0; width: 100%; - border-bottom: 1px solid $ui-04; + border-bottom: 1px solid $ui-03; thead { @include typescale('zeta'); @@ -50,24 +50,24 @@ } th { - border-top: 1px solid $ui-04; + border-top: 1px solid $ui-03; } th, td { - border-top: 1px solid $ui-04; + border-top: 1px solid $ui-03; padding-left: $spacing-sm; vertical-align: middle; text-align: left; &:first-of-type { padding-left: rem(24px); - border-left: 1px solid $ui-04; + border-left: 1px solid $ui-03; } &:last-of-type { padding-right: $spacing-lg; - border-right: 1px solid $ui-04; + border-right: 1px solid $ui-03; } } @@ -123,7 +123,7 @@ } &:last-of-type { - border-right-color: $ui-04; + border-right-color: $ui-03; } } } diff --git a/src/components/data-table-v2/_data-table-v2-expandable.scss b/src/components/data-table-v2/_data-table-v2-expandable.scss index 50c67fb77137..9690f3b1d225 100644 --- a/src/components/data-table-v2/_data-table-v2-expandable.scss +++ b/src/components/data-table-v2/_data-table-v2-expandable.scss @@ -34,7 +34,7 @@ &:hover { > td { - background-color: rgba($brand-02, 0.1); + background-color: $hover-row; } > td:first-of-type { @@ -51,7 +51,7 @@ + tr[data-child-row] { > td { - background-color: rgba($brand-02, 0.1); + background-color: $hover-row; border-bottom: 1px solid $brand-01; border-right: 1px solid $brand-01; } @@ -61,7 +61,7 @@ tr.#{$prefix}--expandable-row--hover-v2 { > td { - background-color: rgba($brand-02, 0.1); + background-color: $hover-row; border-top: 1px solid $brand-01; } diff --git a/src/components/data-table/_data-table.scss b/src/components/data-table/_data-table.scss index 7e02c767bc9a..ad3fc9296f16 100644 --- a/src/components/data-table/_data-table.scss +++ b/src/components/data-table/_data-table.scss @@ -22,7 +22,7 @@ min-width: 500px; border-collapse: collapse; border-spacing: 0; - border: 2px solid $ui-04; + border: 2px solid $ui-03; td { @include reset; @@ -67,7 +67,7 @@ @include reset; border-collapse: collapse; width: auto; - border: 2px solid $ui-04; + border: 2px solid $ui-03; tr td:first-child, tr th:first-child { @@ -116,10 +116,10 @@ } &--even { - background-color: $ui-03; + background-color: $ui-02; & + .#{$prefix}--expandable-row { - background-color: $ui-03; + background-color: $ui-02; } } } diff --git a/src/components/date-picker/_date-picker.scss b/src/components/date-picker/_date-picker.scss index d31893489c96..f5a3b8957ceb 100644 --- a/src/components/date-picker/_date-picker.scss +++ b/src/components/date-picker/_date-picker.scss @@ -46,7 +46,7 @@ height: rem(40px); max-width: 9rem; padding: 0 $spacing-md; - background-color: $field-01; + background-color: $field-02; color: $text-01; border: 1px solid transparent; @@ -141,7 +141,7 @@ fill: $text-01; &:hover svg { - fill: $brand-01; + fill: $hover-secondary; } } @@ -238,25 +238,41 @@ justify-content: center; color: $text-01; border-radius: 0; + border: 2px solid transparent; &:hover { - background: $ui-04; + background: $hover-row; } &:focus { outline: none; - background: $ui-04; + background: $ui-03; } } .#{$prefix}--date-picker__day.today, .flatpickr-day.today { - border: 2px solid $brand-01; + position: relative; + + &::after { + content: ''; + position: absolute; + display: block; + top: 90%; + left: 50%; + transform: translateX(-50%); + height: 3px; + width: 3px; + border-radius: 50%; + background: $brand-01; + } } - .#{$prefix}--date-picker__day.today.no-border, - .flatpickr-day.today.no-border { - border: none; + .#{$prefix}--date-picker__day.today.selected { + border: 2px solid $brand-01; + &::after { + display: none; + } } .#{$prefix}--date-picker__day.disabled, @@ -271,16 +287,14 @@ .#{$prefix}--date-picker__day.inRange, .flatpickr-day.inRange { - background: $brand-02; - box-shadow: -6px 0 0 $brand-02, 6px 0 0 $brand-02; - border: 2px solid transparent; + background: $ui-02; + box-shadow: -6px 0 0 $ui-02, 6px 0 0 $ui-02; } .#{$prefix}--date-picker__day.selected, .flatpickr-day.selected { - background: $brand-01; - color: $inverse-01; - border: 2px solid transparent; + border: 2px solid $brand-01; + background: $ui-01; } .#{$prefix}--date-picker__day.startRange.selected, @@ -300,10 +314,9 @@ .#{$prefix}--date-picker__day.endRange.inRange.selected, .flatpickr-day.endRange.inRange.selected { - background: $brand-01; - border: none; - color: $inverse-01; box-shadow: none; + border: 2px solid $brand-01; + background: $ui-01; } .#{$prefix}--date-picker__day.startRange.inRange:not(.selected), diff --git a/src/components/date-picker/_flatpickr.scss b/src/components/date-picker/_flatpickr.scss index b25b950306fb..481d16937bdb 100644 --- a/src/components/date-picker/_flatpickr.scss +++ b/src/components/date-picker/_flatpickr.scss @@ -17,7 +17,7 @@ box-sizing: border-box; touch-action: manipulation; background: #fff; - box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08); + box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08); } .flatpickr-calendar.open, @@ -35,7 +35,7 @@ .flatpickr-calendar.animate.open { -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); - animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); + animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-calendar.inline { @@ -127,16 +127,16 @@ } .flatpickr-month { background: transparent; - color: rgba(0,0,0,0.9); - fill: rgba(0,0,0,0.9); + color: rgba(0, 0, 0, 0.9); + fill: rgba(0, 0, 0, 0.9); height: 28px; line-height: 1; text-align: center; position: relative; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; overflow: hidden; } .flatpickr-prev-month, @@ -156,14 +156,14 @@ } .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-next-month.flatpickr-prev-month { -/* + /* /*rtl:begin:ignore*/ -/* + /* */ left: 0; -/* + /* /*rtl:end:ignore*/ -/* + /* */ } /* @@ -172,14 +172,14 @@ /*rtl:end:ignore*/ .flatpickr-prev-month.flatpickr-next-month, .flatpickr-next-month.flatpickr-next-month { -/* + /* /*rtl:begin:ignore*/ -/* + /* */ right: 0; -/* + /* /*rtl:end:ignore*/ -/* + /* */ } /* @@ -223,18 +223,18 @@ line-height: 50%; opacity: 0; cursor: pointer; - border: 1px solid rgba(57,57,57,0.05); + border: 1px solid rgba(57, 57, 57, 0.05); box-sizing: border-box; } .numInputWrapper span:hover { - background: rgba(0,0,0,0.1); + background: rgba(0, 0, 0, 0.1); } .numInputWrapper span:active { - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); } .numInputWrapper span:after { display: block; - content: ""; + content: ''; position: absolute; top: 33%; } @@ -245,7 +245,7 @@ .numInputWrapper span.arrowUp:after { border-left: 4px solid transparent; border-right: 4px solid transparent; - border-bottom: 4px solid rgba(57,57,57,0.6); + border-bottom: 4px solid rgba(57, 57, 57, 0.6); } .numInputWrapper span.arrowDown { top: 50%; @@ -253,17 +253,17 @@ .numInputWrapper span.arrowDown:after { border-left: 4px solid transparent; border-right: 4px solid transparent; - border-top: 4px solid rgba(57,57,57,0.6); + border-top: 4px solid rgba(57, 57, 57, 0.6); } .numInputWrapper span svg { width: inherit; height: auto; } .numInputWrapper span svg path { - fill: rgba(0,0,0,0.5); + fill: rgba(0, 0, 0, 0.5); } .numInputWrapper:hover { - background: rgba(0,0,0,0.05); + background: rgba(0, 0, 0, 0.05); } .numInputWrapper:hover span { opacity: 1; @@ -282,31 +282,31 @@ display: inline-block; text-align: center; -webkit-transform: translate3d(0px, 0px, 0px); - transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); } .flatpickr-current-month.slideLeft { -webkit-transform: translate3d(-100%, 0px, 0px); - transform: translate3d(-100%, 0px, 0px); + transform: translate3d(-100%, 0px, 0px); -webkit-animation: fpFadeOut 400ms ease, fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); - animation: fpFadeOut 400ms ease, fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); + animation: fpFadeOut 400ms ease, fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-current-month.slideLeftNew { -webkit-transform: translate3d(100%, 0px, 0px); - transform: translate3d(100%, 0px, 0px); + transform: translate3d(100%, 0px, 0px); -webkit-animation: fpFadeIn 400ms ease, fpSlideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1); - animation: fpFadeIn 400ms ease, fpSlideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1); + animation: fpFadeIn 400ms ease, fpSlideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-current-month.slideRight { -webkit-transform: translate3d(100%, 0px, 0px); - transform: translate3d(100%, 0px, 0px); + transform: translate3d(100%, 0px, 0px); -webkit-animation: fpFadeOut 400ms ease, fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1); - animation: fpFadeOut 400ms ease, fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1); + animation: fpFadeOut 400ms ease, fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-current-month.slideRightNew { -webkit-transform: translate3d(0, 0, 0px); - transform: translate3d(0, 0, 0px); + transform: translate3d(0, 0, 0px); -webkit-animation: fpFadeIn 400ms ease, fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1); - animation: fpFadeIn 400ms ease, fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1); + animation: fpFadeIn 400ms ease, fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-current-month span.cur-month { font-family: inherit; @@ -317,7 +317,7 @@ padding: 0; } .flatpickr-current-month span.cur-month:hover { - background: rgba(0,0,0,0.05); + background: rgba(0, 0, 0, 0.05); } .flatpickr-current-month .numInputWrapper { width: 6ch; @@ -325,10 +325,10 @@ display: inline-block; } .flatpickr-current-month .numInputWrapper span.arrowUp:after { - border-bottom-color: rgba(0,0,0,0.9); + border-bottom-color: rgba(0, 0, 0, 0.9); } .flatpickr-current-month .numInputWrapper span.arrowDown:after { - border-top-color: rgba(0,0,0,0.9); + border-top-color: rgba(0, 0, 0, 0.9); } .flatpickr-current-month input.cur-year { background: transparent; @@ -353,7 +353,7 @@ .flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover { font-size: 100%; - color: rgba(0,0,0,0.5); + color: rgba(0, 0, 0, 0.5); background: transparent; pointer-events: none; } @@ -366,22 +366,22 @@ display: -ms-flexbox; display: flex; -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; + -ms-flex-align: center; + align-items: center; height: 28px; } span.flatpickr-weekday { cursor: default; font-size: 90%; background: transparent; - color: rgba(0,0,0,0.54); + color: rgba(0, 0, 0, 0.54); line-height: 1; margin: 0; text-align: center; display: block; -webkit-flex: 1; - -ms-flex: 1; - flex: 1; + -ms-flex: 1; + flex: 1; font-weight: bolder; } .dayContainer, @@ -412,37 +412,37 @@ span.flatpickr-weekday { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; -ms-flex-wrap: wrap; -ms-flex-pack: justify; -webkit-justify-content: space-around; - justify-content: space-around; + justify-content: space-around; -webkit-transform: translate3d(0px, 0px, 0px); - transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); opacity: 1; } .flatpickr-calendar.animate .dayContainer.slideLeft { -webkit-animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); - animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); + animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-calendar.animate .dayContainer.slideLeft, .flatpickr-calendar.animate .dayContainer.slideLeftNew { -webkit-transform: translate3d(-100%, 0px, 0px); - transform: translate3d(-100%, 0px, 0px); + transform: translate3d(-100%, 0px, 0px); } .flatpickr-calendar.animate .dayContainer.slideLeftNew { -webkit-animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); - animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); + animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-calendar.animate .dayContainer.slideRight { -webkit-animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1); - animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1); + animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: translate3d(100%, 0px, 0px); - transform: translate3d(100%, 0px, 0px); + transform: translate3d(100%, 0px, 0px); } .flatpickr-calendar.animate .dayContainer.slideRightNew { -webkit-animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1); - animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1); + animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-day { background: none; @@ -454,8 +454,8 @@ span.flatpickr-weekday { font-weight: 400; width: 14.2857143%; -webkit-flex-basis: 14.2857143%; - -ms-flex-preferred-size: 14.2857143%; - flex-basis: 14.2857143%; + -ms-flex-preferred-size: 14.2857143%; + flex-basis: 14.2857143%; max-width: 40px; height: 40px; line-height: 40px; @@ -463,8 +463,8 @@ span.flatpickr-weekday { display: inline-block; position: relative; -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; + -ms-flex-pack: center; + justify-content: center; text-align: center; } // .flatpickr-day.inRange, @@ -560,9 +560,9 @@ span.flatpickr-weekday { border-radius: 0; box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7; } -.rangeMode .flatpickr-day { - margin-top: 1px; -} +// .rangeMode .flatpickr-day { +// margin-top: 1px; +// } .flatpickr-weekwrapper { display: inline-block; float: left; @@ -608,14 +608,14 @@ span.flatpickr-weekday { display: flex; } .flatpickr-time:after { - content: ""; + content: ''; display: table; clear: both; } .flatpickr-time .numInputWrapper { -webkit-flex: 1; - -ms-flex: 1; - flex: 1; + -ms-flex: 1; + flex: 1; width: 40%; height: 40px; float: left; @@ -669,13 +669,13 @@ span.flatpickr-weekday { font-weight: bold; width: 2%; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; -webkit-align-self: center; - -ms-flex-item-align: center; - -ms-grid-row-align: center; - align-self: center; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; } .flatpickr-time .flatpickr-am-pm { outline: 0; @@ -695,104 +695,104 @@ span.flatpickr-weekday { from { opacity: 0; -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes fpFadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @-webkit-keyframes fpSlideLeft { from { -webkit-transform: translate3d(0px, 0px, 0px); - transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); } to { -webkit-transform: translate3d(-100%, 0px, 0px); - transform: translate3d(-100%, 0px, 0px); + transform: translate3d(-100%, 0px, 0px); } } @keyframes fpSlideLeft { from { -webkit-transform: translate3d(0px, 0px, 0px); - transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); } to { -webkit-transform: translate3d(-100%, 0px, 0px); - transform: translate3d(-100%, 0px, 0px); + transform: translate3d(-100%, 0px, 0px); } } @-webkit-keyframes fpSlideLeftNew { from { -webkit-transform: translate3d(100%, 0px, 0px); - transform: translate3d(100%, 0px, 0px); + transform: translate3d(100%, 0px, 0px); } to { -webkit-transform: translate3d(0px, 0px, 0px); - transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); } } @keyframes fpSlideLeftNew { from { -webkit-transform: translate3d(100%, 0px, 0px); - transform: translate3d(100%, 0px, 0px); + transform: translate3d(100%, 0px, 0px); } to { -webkit-transform: translate3d(0px, 0px, 0px); - transform: translate3d(0px, 0px, 0px); + transform: translate3d(0px, 0px, 0px); } } @-webkit-keyframes fpSlideRight { from { -webkit-transform: translate3d(0, 0, 0px); - transform: translate3d(0, 0, 0px); + transform: translate3d(0, 0, 0px); } to { -webkit-transform: translate3d(100%, 0px, 0px); - transform: translate3d(100%, 0px, 0px); + transform: translate3d(100%, 0px, 0px); } } @keyframes fpSlideRight { from { -webkit-transform: translate3d(0, 0, 0px); - transform: translate3d(0, 0, 0px); + transform: translate3d(0, 0, 0px); } to { -webkit-transform: translate3d(100%, 0px, 0px); - transform: translate3d(100%, 0px, 0px); + transform: translate3d(100%, 0px, 0px); } } @-webkit-keyframes fpSlideRightNew { from { -webkit-transform: translate3d(-100%, 0, 0px); - transform: translate3d(-100%, 0, 0px); + transform: translate3d(-100%, 0, 0px); } to { -webkit-transform: translate3d(0, 0, 0px); - transform: translate3d(0, 0, 0px); + transform: translate3d(0, 0, 0px); } } @keyframes fpSlideRightNew { from { -webkit-transform: translate3d(-100%, 0, 0px); - transform: translate3d(-100%, 0, 0px); + transform: translate3d(-100%, 0, 0px); } to { -webkit-transform: translate3d(0, 0, 0px); - transform: translate3d(0, 0, 0px); + transform: translate3d(0, 0, 0px); } } @-webkit-keyframes fpFadeOut { diff --git a/src/components/detail-page-header/_detail-page-header.scss b/src/components/detail-page-header/_detail-page-header.scss index f90080e0ad6d..902a483a8dd5 100644 --- a/src/components/detail-page-header/_detail-page-header.scss +++ b/src/components/detail-page-header/_detail-page-header.scss @@ -106,7 +106,7 @@ justify-content: center; align-items: center; border-radius: 50%; - border: 1px solid $ui-05; + border: 1px solid $ui-04; height: rem(36px); width: rem(36px); margin-right: 0.625rem; diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss index 3d61c97a7c55..e0c2dea3fb92 100644 --- a/src/components/dropdown/_dropdown.scss +++ b/src/components/dropdown/_dropdown.scss @@ -21,7 +21,7 @@ position: relative; list-style: none; display: block; - background-color: $field-01; + background-color: $field-02; width: 100%; height: rem(40px); cursor: pointer; @@ -68,7 +68,7 @@ } .#{$prefix}--dropdown[data-value=''] .#{$prefix}--dropdown-text { - color: $text-03; + color: $text-02; } .#{$prefix}--dropdown-text { @@ -115,10 +115,10 @@ &:hover, &:focus { - background-color: $brand-01; - color: $inverse-01; + background-color: $hover-row; outline: 1px solid transparent; text-decoration: underline; + color: $text-01; } } diff --git a/src/components/file-uploader/_file-uploader.scss b/src/components/file-uploader/_file-uploader.scss index 836a216b3be0..589b1bed35d0 100644 --- a/src/components/file-uploader/_file-uploader.scss +++ b/src/components/file-uploader/_file-uploader.scss @@ -44,7 +44,8 @@ align-items: center; justify-content: space-between; min-height: rem(30px); - background-color: $field-01; + background-color: $field-02; + border: 1px solid $ui-03; padding: 0 $spacing-md; margin-bottom: $spacing-md; diff --git a/src/components/link/_link.scss b/src/components/link/_link.scss index 217f2ba5255f..637c648b09c4 100644 --- a/src/components/link/_link.scss +++ b/src/components/link/_link.scss @@ -28,15 +28,15 @@ &:active, &:hover, &:focus { - color: $brand-02; + color: $hover-primary-text; } &:focus { @include focus-outline('border'); } - &[aria-disabled="true"] { - opacity: .5; + &[aria-disabled='true'] { + opacity: 0.5; pointer-events: none; } } diff --git a/src/components/module/_module.scss b/src/components/module/_module.scss index 6d1a122a11a3..db36e1f66908 100644 --- a/src/components/module/_module.scss +++ b/src/components/module/_module.scss @@ -35,7 +35,7 @@ display: flex; align-items: center; padding: 1rem 1.5rem; - border-bottom: 1px solid $ui-04; + border-bottom: 1px solid $ui-03; } .#{$prefix}--module__title { diff --git a/src/components/notification/_inline-notification.scss b/src/components/notification/_inline-notification.scss index 8d8f9d96a8b3..c0ee7acc4e74 100644 --- a/src/components/notification/_inline-notification.scss +++ b/src/components/notification/_inline-notification.scss @@ -23,7 +23,7 @@ background-color: transparent; padding: $spacing-sm $spacing-md; min-height: rem(40px); - color: $text-03; + color: $text-02; margin-top: $spacing-md; margin-bottom: $spacing-md; } @@ -95,7 +95,7 @@ .#{$prefix}--inline-notification__close-icon { height: 10px; width: 10px; - fill: $text-03; + fill: $ui-05; position: absolute; top: 3px; right: 1px; diff --git a/src/components/notification/_toast-notification.scss b/src/components/notification/_toast-notification.scss index 8862b1a73801..883a034d823e 100644 --- a/src/components/notification/_toast-notification.scss +++ b/src/components/notification/_toast-notification.scss @@ -22,7 +22,7 @@ justify-content: space-between; width: 16.875rem; padding: $spacing-md $spacing-md $spacing-xs $spacing-md; - background-color: $inverse-01; + background-color: $ui-01; color: $text-01; margin-top: $spacing-xs; margin-bottom: $spacing-xs; @@ -50,7 +50,7 @@ } .#{$prefix}--toast-notification__close-button { - background-color: $inverse-01; + background-color: $ui-01; border: none; cursor: pointer; margin: 0; @@ -66,7 +66,7 @@ .#{$prefix}--toast-notification__icon { height: 10px; width: 10px; - fill: $text-03; + fill: $ui-05; position: absolute; top: 1px; right: 1px; @@ -82,7 +82,7 @@ .#{$prefix}--toast-notification__subtitle { @include typescale('omega'); - color: $text-03; + color: $text-02; margin-top: 0; margin-bottom: $spacing-md; line-height: 1.2; @@ -90,7 +90,7 @@ .#{$prefix}--toast-notification__caption { @include typescale('omega'); - color: $text-03; + color: $text-02; line-height: 1; } } diff --git a/src/components/number-input/_number-input.scss b/src/components/number-input/_number-input.scss index d4bbb56806e2..fe961c7b2720 100644 --- a/src/components/number-input/_number-input.scss +++ b/src/components/number-input/_number-input.scss @@ -25,7 +25,7 @@ font-weight: 300; height: rem(40px); color: $text-01; - background-color: $field-01; + background-color: $field-02; border: $input-border; border-radius: 0; @@ -84,7 +84,7 @@ } &:hover svg { - fill: $brand-02; + fill: $hover-primary; } } @@ -96,7 +96,7 @@ // Hover styles for use with old HTML w/o button &:hover { cursor: pointer; - fill: $brand-02; + fill: $hover-primary; } } diff --git a/src/components/order-summary/_order-summary.scss b/src/components/order-summary/_order-summary.scss index 0d5a642a56dd..5d6ed1cb2d29 100644 --- a/src/components/order-summary/_order-summary.scss +++ b/src/components/order-summary/_order-summary.scss @@ -26,7 +26,7 @@ display: flex; align-items: center; padding: 0 0 0 1.25rem; - border-bottom: 1px solid $ui-05; + border-bottom: 1px solid $ui-03; .#{$prefix}--dropdown { flex: 1; @@ -59,7 +59,7 @@ .#{$prefix}--order-list { padding: 1.25rem 0; margin: 0 1.25rem; - border-bottom: 1px solid $ui-05; + border-bottom: 1px solid $ui-03; } .#{$prefix}--order-item { diff --git a/src/components/overflow-menu/_overflow-menu.scss b/src/components/overflow-menu/_overflow-menu.scss index 03cbc51c2424..50ee0e88424e 100644 --- a/src/components/overflow-menu/_overflow-menu.scss +++ b/src/components/overflow-menu/_overflow-menu.scss @@ -34,7 +34,7 @@ &:hover, &:focus { - fill: $brand-01; + fill: $hover-secondary; } } @@ -47,7 +47,7 @@ position: absolute; z-index: z('floating'); background-color: $inverse-01; - border: 1px solid $ui-04; + border: 1px solid $ui-03; width: 11.25rem; list-style: none; margin-top: $spacing-2xs; @@ -68,8 +68,8 @@ z-index: -1; transform: rotate(45deg); background-color: $inverse-01; - border-top: 1px solid $ui-04; - border-left: 1px solid $ui-04; + border-top: 1px solid $ui-03; + border-left: 1px solid $ui-03; top: -5px; left: 24px; } @@ -84,7 +84,7 @@ } .#{$prefix}--overflow-menu--divider { - border-top: 1px solid $ui-04; + border-top: 1px solid $ui-03; } .#{$prefix}--overflow-menu-options__btn { @@ -103,8 +103,7 @@ &:focus { outline: 1px solid transparent; - background-color: $brand-01; - color: $inverse-01; + background-color: $hover-row; } .#{$prefix}--overflow-menu-options__option--danger & { @@ -115,15 +114,11 @@ } .#{$prefix}--overflow-menu-options__option:hover { - background-color: $brand-01; - } - - .#{$prefix}--overflow-menu-options__option:hover .#{$prefix}--overflow-menu-options__btn { - color: $inverse-01; + background-color: $hover-row; } .#{$prefix}--overflow-menu-options__option--danger { - border-top: 1px solid $ui-04; + border-top: 1px solid $ui-03; } .#{$prefix}--overflow-menu-options__option--danger:hover { diff --git a/src/components/pagination/_pagination.scss b/src/components/pagination/_pagination.scss index 81a5bcdf5af7..b249e7eefb6b 100644 --- a/src/components/pagination/_pagination.scss +++ b/src/components/pagination/_pagination.scss @@ -23,7 +23,7 @@ $css--helpers: true; padding: $spacing-xs $spacing-md; display: flex; align-items: center; - border: 1px solid $ui-04; + border: 1px solid $ui-03; .#{$prefix}--form-item { flex: auto; @@ -67,7 +67,7 @@ $css--helpers: true; &:hover { .#{$prefix}--pagination__button-icon { - fill: $brand-01; + fill: $hover-secondary; } } @@ -127,6 +127,7 @@ $css--helpers: true; } .#{$prefix}--text-input { + background-color: $field-01; height: rem(24px); min-width: rem(24px); width: rem(24px); @@ -149,8 +150,8 @@ $css--helpers: true; .#{$prefix}--pagination__button { height: 100%; - border-left: 1px solid $ui-04; - border-right: 1px solid $ui-04; + border-left: 1px solid $ui-03; + border-right: 1px solid $ui-03; width: rem(42px); margin: 0; } diff --git a/src/components/pagination/pagination.html b/src/components/pagination/pagination.html index 9da802f0bc0c..d42514694af4 100644 --- a/src/components/pagination/pagination.html +++ b/src/components/pagination/pagination.html @@ -14,10 +14,14 @@ Items per page  |   - 1-10 of 40 items + + 1-10 of + 40 items
- 1 of 4 pages + + 1 of + 4 pages